码迷,mamicode.com
首页 > Web开发 > 详细

jQuery方式实现ajax接口调用

时间:2019-07-18 23:47:43      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:user   roc   day   encode   stat   fun   use   执行   array   

0. serialize()     serializeArray()

  // jQuery为了我们能够简便的操作表单,设置了两个方法用于对表单数据进行处理
        // 1 serialize()
        //   - 可以将一个表单的数据转换为urlencoded形式的数据
        //       - 还可以直接作为$.ajax的参数使用
        // 2 serializeArray()
        // - 可以将一个表单的数据转换为数组形式
        //       - 也可以直接作为$.ajax的参数使用

        // 小结:
        // - 如果仅仅需要进行表单的数据处理,直接使用serialize()即可 (常用)
        // - 如果要查看数据内容,可以使用serializeArray()

        // - 以前我们说表单提交不好用只是说提交后会跳转导致页面刷新,用户体验不好,请求次数过多
        //          - 但是表单自身的功能还是无可取代的,该用还要用

  注意:通过$.ajax发送FormData请求时,需要指定两个属性,不设置会导致报错

  contentType:false;    //不指定请求体内容类型

  processData: false;   //不进行数据处理操作

  

FormData的参数需要一个DOM对象,需要转换后使用

 1. 

<body>
    <form id="form">
	<input type="text" name="username">
	<input type="file" name="file">
	<input type="button" value="按钮" id="btn">
    </form>
</body>
<script>
    $(‘#btn‘).on(‘click‘, function(){
        var fd = new FormData($(‘form‘)[0])
        $.ajax({
            method: ‘post‘,
            url: ‘‘,
            data: fd,
            contentType: false,
            processData: false,
            success: function(res){
                console.log(‘res‘)
            }
        });
})

 2. 

 jsonp和ajax没有任何关联,jQuery为了我们请求操作时的统一,将jsonp的发送方式设置在了$.ajax中 

$(‘#btn‘).on(‘click‘, function () {
	$.ajax({
		method : ‘POST‘
		url : ‘http://localhost/Ajax_day4/demo1.php‘,
		success : function (datas) {
			console.log(datas);
		},
            // 如果在dataType中设置‘jsonp‘,表示当前请求以jsonp形式发送,与dataType的原始功能无关
		dataType : ‘jsonp‘
	});   
}

  

 3. ajax设置请求头

$.ajax({
         type: type,
         headers: {
			‘token‘:‘token_value‘
         },
         url: url,
         data: data,
         success: function(data) {
         },
         error: function(err) {
         },
         complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数 
         }
});

  

  

jQuery方式实现ajax接口调用

标签:user   roc   day   encode   stat   fun   use   执行   array   

原文地址:https://www.cnblogs.com/xhrr/p/ajax.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!