jQuery方式实现ajax接口调用

Posted 2022-04-24 xhrr

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery方式实现ajax接口调用相关的知识，希望对你有一定的参考价值。

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接口调用的主要内容，如果未能解决你的问题，请参考以下文章

如何用JQUERY的ajax请求HTTPS的接口？？？