Ajax 传递数组、表单+

一、AJAX概述

AJAX 全称 asynchronous（异步） javaScript and xml ，在项目中AJAX主要用于通过异步请求的方式与服务器进行交互。通过在应用中使用AJAX技术给广大的网民用户带来了全新的体验。

AJAX的核心：通过使用XHR对象，向服务器发送异步请求。

3异步请求的特点：异步请求响应的是一段字符串文本信息（响应的是网页的局部）。不会造成整张页面的刷新。

4.AJAX不可以进行文件的导出功能，因为导出excel，实际上是文件下载，后台需要往前端（浏览器）写文件流的。而Ajax请求获取数据都是“字符串”，整个交互传输用的都是字符串数据，它没法解析后台返回的文件流，但浏览器可以。

二、使用AJAX开发（原始）

/***  1 创建xhr对象 ： 注意浏览器的差异*  IE5 6 或以下 版本 xhr = new ActiveXObject("Microsoft.xmlhttp");*  非 IE5 6 或以下 版本 xhr = new XMLHttpRequest();*/
var xhr;
if(window.ActiveXObject) { // IE5 6 或以下 版本xhr = new ActiveXObject("Microsoft.xmlhttp");
}else {xhr = new XMLHttpRequest();
}
// 2 明确请求目标和请求方式
xhr.open('GET','/AjaxRequest');
// 3 发送请求
xhr.send();
// 4 处理解析响应
xhr.onreadystatechange = function () {/*** 使用xhr对象中的响应内容* xhr在整个运行过程中有自己的状态， 而xhr.readyState的返回值表示整个请求过程的状态：*  0 代表请求还未初始化，还没有调用send方法*  1 代表调用了send方法，发送了请求*  2 请求已经返回了，但是响应的内容还没开始解析*  3 开始解析响应内容了，但还没解析完*  4 完全解析完毕响应内容，我们可以使用了*/if(xhr.readyState==4 && xhr.status==200) {// 代表响应已经完全解析完毕可以使用了// 获取到响应内容var txt = xhr.responseText;console.log(txt);// DOM编程document.getElementById('nameMsg').innerHTML = txt;}
}

三、发送post请求

var strIds = ['1','2','3']
$.ajax({url : "*****",        //后台请求地址type:"post",      //请求方式,post请求 ,可以改成get请求dataType : "json",    //后台返回值类型,一般均为jsondata:{ids:strIds},    //请求后台所带的参数，为键值对traditional : true,  //是否序列化  注：传递类型为数组，则必须加此项为true，否则后端接受不到参数！！！！！async : false,        //是否为异步请求success:function (data) {  //data为 请求后台返回的数据alert(data.status)},err:function () {alert("失败！")}})

注：传递置后端数据类型为数组时，则traditional 必须加此项为true，否则后端接受不到参数！！！！！

注：若不加traditional : true，则需要在后端使用@RequestParam（value=""）指定接受参数的类型，如下↓

 @RequestMapping(value = "/****",method = RequestMethod.POST)@ResponseBodypublic Object manyFiling(@RequestParam(value="ids[]")String[] ids, HttpServletRequest request){}

四、使用ajax传递表单数据。

var form = $('#formId').serialize();
$.ajax({url : "*****",        //后台请求地址type:"post",      //请求方式,post请求 ,可以改成get请求dataType : "json",    //后台返回值类型,一般均为jsondata:form,    //请求后台所带的参数，为表单时，只写定义的变量。traditional : true,  //是否序列化  注：传递类型为数组，则必须加此项为true，否则后端接受不到参数！！！！！async : false,        //是否为异步请求success:function (data) {  //data为 请求后台返回的数据alert(data.status)},err:function () {alert("失败！")}})

若传递后台的参数除了表单还有其他参数，则进行数据的拼接，如下↓

  data:form+'&codes='+codes   //不能写{}键值对形式的！

Ajax 传递数组、表单+相关推荐

JQuery Ajax传递整个表单数据方法
jQuery提倡写更少的代码,做更多的事.jQuery的Ajax是我们经常用到的一个方法,当需要传递的数据比较少时我们可以一一的整理成 url字符串然后传递给服务器,接受返回的数据.当数据比较多时, ...
Jquery技巧：使用ajax技术提交表单数据
新建两个页面: 1.show.jsp:调用ajax,将表单中的数据发送给ajax.jsp页面. 2.ajax.jsp:获取show.jsp页面传递的表单数据,并返回结果. 两个页面的编码格式要设置为G ...
使用ajax提交form表单，包括ajax文件上传转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传前言使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
学习日志day45（2021-09-09）（1、有道翻译API使用json格式数据 2、JSONP 3、Ajax提交form表单 4、Web Uploader）
学习内容:学习JavaWeb(Day45) 1.有道翻译API使用json格式数据 2.JSONP 3.Ajax提交form表单 4.Web Uploader 1.有道翻译API使用json格式数据 ...
【js】Ajax提交form表单（ajaxSubmit使用讲解）
1 .引入依赖脚本 <script type="text/javascript" src="/js/jquery/jquery.form.js">& ...
ajax如何实现表单验证码,Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）...
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html 验证码提交自验证用户名验证码 (function($){ $(docu ...
利用ajax提交form表单数据
利用thymeleaf引擎创建的html中,使用了adminLTE模板,ajax提交form表单数据,本以为很容易实现,却遇到了很多问题,这里进行总结. 1.get方式提交通过serialize() ...
java ajax提交form表单提交_form表单AJAX提交（四种方法）
一.AJAX的 form表单提交 1.第一种: 序列化提交$('#form').serialize() 前台: $.ajax({ url: "", type: "post ...
使用原生javascript实现ajax提交form表单
使用原生javascript实现ajax提交form表单 ============================ 1 准备表单首先我们需要编写一个html代码,这里我是采用nodej ...
ajax传递数组用struts2来接收
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a78460750/article/de ...

Ajax 传递数组、表单+

一、AJAX概述

二、使用AJAX开发（原始）

三、发送post请求

`注：传递置后端数据类型为数组时，则traditional 必须加此项为true，否则后端接受不到参数！！！！！`

`注：若不加traditional : true，则需要在后端使用@RequestParam（value=""）指定接受参数的类型，如下↓`

四、使用ajax传递表单数据。

`若传递后台的参数除了表单还有其他参数，则进行数据的拼接，如下↓`

Ajax 传递数组、表单+相关推荐

最新文章

热门文章