登录    关于
马育民老师的博客

马育民的博客

QQ:65242847

jquery ajax发送json格式数据

需要掌握:jquery扩展方法-将表单数据转为json对象

ajax代码

注意: 是发送 json 格式的 字符串,而不是发送 json对象

$("#reg").click(function() {
    // 将表单数据转为 json 对象
    var jsonObj = $("#myform").serializeObject();
    console.log( jsonObj )
    //将json对象转为json字符串
    var jsonStr=JSON.stringify( jsonObj )
    console.log( jsonStr )
    $.ajax({
        type: "POST",
        url: "student",
        contentType: "application/json; charset=utf-8",
        data: jsonStr,//发送json字符串
        dataType: "json",
        success: function (data) {
            alert(1)
        },
        error: function (data) {
            alert(JSON.stringify(data));
        }
    });
});

解释: $("#myform").serializeObject()jquery扩展方法-将表单数据转为json对象

例子

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>


<form id="myform">
    登录名:<input type="text" name="username" value="李雷"><br>
    密码:<input type="text" name="password" value="123456"><br>
    性别:<input type="radio" name="sex" value="0" >女&nbsp;&nbsp;
    <input type="radio" name="sex" value="1" checked>男&nbsp;&nbsp;<br>
    爱好:<input type="checkbox" value="wzry" name="like">王者荣耀&nbsp;&nbsp;
    <input type="checkbox" value="cj" name="like" checked>吃鸡&nbsp;&nbsp;
    <input type="checkbox" value="douyin" name="like" checked>抖音&nbsp;&nbsp;<br>

    民族:
    <select name="minzu">
        <option value="-1" >--请选择--</option>
        <option value="1" >汉族</option>
        <option value="2" selected>满族</option>
        <option value="3" >蒙古族</option>
    </select> <br>
    描述:<textarea name="descrip"></textarea><br>
    <input type="button" value="注册" id="reg">
</form>

<script>
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};


$("#reg").click(function() {
    // 将表单数据转为 json 对象
    var jsonObj = $("#myform").serializeObject();
    console.log( jsonObj )
    var jsonStr=JSON.stringify( jsonObj )//将json对象转为json字符串
    console.log( jsonStr )
    $.ajax({
        type: "POST",
        url: "student",
        contentType: "application/json; charset=utf-8",
        data: jsonStr,
        dataType: "json",
        success: function (data) {
            alert(1)
        },
        error: function (data) {
            alert(JSON.stringify(data));
        }
    });
});
</script>

原文出处:http://malaoshi.top/show_1IX1uU8KHdzS.html