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

  

  

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

时间: 2024-10-10 09:47:29

jQuery方式实现ajax接口调用的相关文章

jquery ajax异步调用

写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var x=""; var y=""; $.ajax({ type: "post", url: "../ashx/RemoveHoliday.ashx", dataType: "json", data: { parm

jQuery AJAX实现调用页面后台方法

1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的.后台代码: [WebMethod] public static string SayHello() { return "Hello Ajax!"; } JS代码: $(function() { $("#btnOK&qu

jQuery中的Ajax几种请求方式

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (Map) : (可选参数) 发送至服务器的 key/value 数据. callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数. 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的.jQuery

Jquery在unload中成功调用Jquery的.ajax方法

因为页面要求,需要在页面跳转的时候做一些数据的保存工作,试了很多次,发现Jquery的unload事件中调用.ajax方法,在FireFox中可以顺利执行,但是在Chromium下却返回了textStatus为error的消息.试验过很多方法,例如在页面离开时弹出确认框,这样虽然返回了error消息,但是数据库显示操作执行完毕.将确认框除去后,数据库依然没有响应. 查阅多方资料后,发现是以为.ajax的异步响应问题,把ajax请求改为同步的,问题解决. 代码如下: 1 $(window).unl

编写自己的javascript功能库之Ajax(仿jquery方式)

本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已. 下面这是我编写的操作ajax的代码功能,勉强让我称之为库吧.. js代码实例(tool.ajax.js): 1 /** 2 * JS库 使用ajax 3 * @author jlb 4 */ 5 if(typeof tool == 'undefined') { 6 var tool = function(){}; 7 } 8 tool.ajax = function(){}; 9 10 11 /**

jQuery简单的Ajax调用示例

jQuery简单的Ajax调用示例 jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script> <script type=&qu

MVC中处理表单提交的方式(Ajax+Jquery)

MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t"> <div class="col-md-6"> <div class="form-group"> <label class="col-sm-3 control-label">订单编号:</la

【原创经验分享】JQuery(Ajax)调用WCF服务

最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚开始入门,就没觉得多大区别啦,这次写的东西跟WebService一样,我们写了一个WCF,那当然就是要用的,要用的话,当然不能只能在.NET平台下用了,必须跨平台呀,所以,Ajax能调用,这个基本的要求就必须要实现的了,所以,本次经验分享就是写JQuery的Ajax调用WCF的服务了.   一.新建

前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式

DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>