jQuery方式实现ajax接口调用

谁借莪１个温暖的怀抱￠ 2021-11-10 01:08 339阅读 0赞

### 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) { //请求完成后最终执行参数　
             }
    });

转载于:https://www.cnblogs.com/xhrr/p/ajax.html