jQuery ajax 和表单序列化

最新推荐文章于 2024-10-14 17:54:07 发布

weixin_34117522

最新推荐文章于 2024-10-14 17:54:07 发布

阅读量109

点赞数

文章标签： json python 前端 ViewUI

原文链接：https://my.oschina.net/esdn/blog/906279

版权

为什么80%的码农都做不了架构师？>>>

$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。

$.ajax() 常见参数

参数	类型	说明
url	String	发送请求的地址
type	String	请求方式：POST 或 GET，默认 GET
data	Object 或String	发动到服务器的数据，键值对字符串或对象
dataType	String	服务器返回给前台的数据，可指定XML,JSON等
success	Function	请求成功后调用的回调函数
error	Function	请求失败时调用的回调函数
traditional	Boolean	用传统的方式来序列化发送到服务器的数据，那么就设置为 true

注意：1、服务器返回到前端的数据默认是字符串 ( Django HttpResponse)，
                如果想行按照对象处理，需要用jQuery 序列化，JSON.parse（xxx）
如果不想序列化，需要定义ajax 的dataType 参数 dataType：json
              或者直接用 Django 的 JsonResponse 返回 Json 数据格式 (推荐)
          2、前端发送到服务器的数据如果键值对中包含数组，如data:{a:1,b:[1,2,3,4]}
django 默认不能处理，需要设置 ajax 的traditional 参数： traditional：true

表单序列化

.serialize()

使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对大量表单元素时，会把表单元素内容序列化为字符串，然后再使用 Ajax 请求。

<!-- html -->
<body>
    <form>
        <input type="text" name="user"/>
        <input type="text" name="mail"/>
        <input type="radio" value="1" name="gender"> man
        <input type="radio" value="2" name="gender"> women
    </form>
    <button>提交</button>
</body>

// javascript
$('button').click(function(){
    $.ajax({
        type : 'POST',
        url : '/ajax/',
        data : $('form').serialize(),         //序列化表单输入，选择内容
        success : function (response, status, xhr) {
            alert(response);
        }
    });
});

.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉列表框等内容。

$(function(){
    $('button').click(function(){
        var v = $('form').serialize();
        console.log(v)
        console.log(typeof(v))        //返回结果为字符串
    });
});

// 输出结果
// user=2&mail=d&gender=1
// string

.serializeArray()

除了.serialize()方法，还有一个可以返回 JSON 数据的方法：.serializeArray()。这个方法
可以直接把数据整合成键值对的 JSON 对象。

$(function(){
    $('button').click(function(){
        var v = $('form input[type=radio]').serializeArray();
        console.log(v)
        console.log(typeof(v))               // 返回结果为Object  --> json 对象
        console.log(v[0].value)              // 获取对应的value       
    });
});

$.ajaxSetup()

有时，我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同，这个时候我们课时使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。

$('button').click(function () {
    $.ajaxSetup({
        type: 'POST',
        url: 'test.php',
        data: $('form').serialize()
    });
});

$.param()

在使用 data 属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法
将对象转换为字符串键值对格式。

var obj = {a : 1, b : 2, c : 3};
var form = $.param(obj);
alert(form);

注意：使用$.param()将对象形式的键值对转为 URL 地址的字符串键值对，可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递 obj对象要谨慎

转载于:https://my.oschina.net/esdn/blog/906279

weixin_34117522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫