Spring中ajax与后端传输数据的几种方式
发布网友
发布时间：2022-05-09 16:41
共2个回答
懂视网
时间：2022-04-23 04:32
本文实例讲述了ajax数据传输方式。分享给大家供大家参考，具体如下：
在异步应用程序中发送和接收信息时，常见的可以选择以纯文本和XML作为数据格式（可参考《jQuery学习笔记之Ajax用法实例详解》）,现在还有一种比较流行的方式：JSON（JavaScript Object Notation）。好了，下面举例说明这三种数据格式在ajax的异步应用。
一、纯文本方式
1、发送/接收数据：
Code is cheap.看代码：
testJs.js
几个附加文件源码：
jsTest.htm
<html> <head> <title>js test</title> <script src="js/testJs.js" type="text/javascript"></script> </head> <body> <form id="form1"> <p> 用户名：<input id="txtUserName" name="txtUserName" type="text" /> 密码：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></p> </form> </body> </html>
AjaxOperations.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>
AjaxOperations.aspx.cs
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
public partial class AjaxOperations : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "chkPwd")
{
string responseTxt = "用户名和密码不匹配！";
string tempStr = Request["userInfos"];
/* 测试用 实际项目中可以对数据库进行检索等等相关操作，这里简化了 */
if (tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[0] == "test" && tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[1] == "test")
{
responseTxt = "验证通过！";
}
Response.Write(responseTxt);
}
}
}
}一一保存文件，ctrl+F5，运行试试看吧。
上面这种方式是最简单最直接也是最有效的方式。熟练使用最佳。
二、XML方式
1、发送XML数据
testJs.js
jsTest.htm文件不变，AjaxOperations.aspx的HTML文件内容不变，服务器端.CS处理代码如下：
AjaxOperations.aspx.cs
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
namespace WebTest2008
{
public partial class AjaxOperations : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "xmlOp") // 处理xml
{
XmlDocument doc = new XmlDocument();
try
{
doc.Load(Request.InputStream); //获取xml数据(这里需要注意接受xml数据的方法)
}
catch (Exception ex)
{
throw ex;
}
string responseTxt = "";
string tempName = doc.SelectSingleNode("profile/userName").InnerText;
string tempPwd = doc.SelectSingleNode("profile/userPwd").InnerText;
if (tempName == "test" && tempPwd == "test")
{
responseTxt = "验证通过！";
}
else responseTxt = "验证失败！";
Response.Write(responseTxt); // 写文本
}
}
}
}很简单的代码，运行看看吧。
2、接收XML数据：
我们看到，上面两个.js文件里处理返回数据时都用到了xmlReq.responseText的属性，下面我们试试看xmlReq.responseXML属性：
testJs.js
同样，jsTest.htm文件不变，AjaxOperations.aspx的HTML文件内容不变，服务器端.CS处理代码稍作修改如下：
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
namespace WebTest2008
{
public partial class AjaxOperations : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "xmlOp") // 处理xml
{
XmlDocument doc = new XmlDocument();
try
{
doc.Load(Request.InputStream); //获取xml数据
}
catch (Exception ex)
{
throw ex;
}
string responseXmlTxt = "";
string tempName = doc.SelectSingleNode("profile/userName").InnerText;
string tempPwd = doc.SelectSingleNode("profile/userPwd").InnerText;
if (tempName == "test" && tempPwd == "test")
{
responseXmlTxt = "<?xml version="1.0" encoding="utf-8" ?> <msg>验证通过！</msg>"; // 测试用，简单的xml文件
}
else responseXmlTxt = "<?xml version="1.0" encoding="utf-8" ?><msg>验证失败！</msg>";
Response.ContentType = ("text/xml;charset=UTF-8"); // 这里必须要设置，否则客户端接收不到这里写好的xml文件
Response.Write(responseXmlTxt); // 写xml
Response.End();
}
}
}
}好了，前面两种方法是大家平时开发中比较熟悉的方式，下面我们来看看第三种方式。
三、JSON方式
json的准备知识：
json是一种简单的数据格式，比xml更轻巧。json是JavaScript 的原生格式，这意味着在 JavaScript 中处理json格式的 数据不需要任何特殊的API 或工具包。json的语法规则其实很简单：对象是一个无序的“‘名称/值'对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值' 对”之间使用“,”（逗号）分隔。看个例子先：
上面的定义方式看起来很简单，但是如果字段众多，命名方式混杂，出错的概率大大增加，怎么办？这时候你就会想到用程序的方式生成json数据。json提供了json.js包，专门提供了几种常用的json处理函数。下载下来，（json.js点击此处本站下载。） ，将其引入然后就可以简单的使用object.toJSONString()转换成json数据。看代码：
也可以使用eval或者parseJSON()方法来转换json数据到object：
关于json.js的学习，请参考网上其他资源，这里我不再赘述了。说了这么多，实践环节开始了：
ajax利用json发送/接收数据：
附加文件，AjaxOperations.aspx的html页面没有改变，AjaxOperations.aspx.cs代码稍作调整如下：
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
public partial class AjaxOperations : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "jsonOp") // 处理JSON
{
string responseJsonTxt = "";
string tempStr = Request["sendStr"].Trim(new char[] { '{', '}' }); // 在服务器上解释JSON需要引用一个能够转化JSON的组件:Json.Net,这里简单测试，略过Json.Net
if (tempStr.Split(new char[] { ',' })[0].Split(new char[] { ':' })[1] == ""test"" && tempStr.Split(new char[] { ',' })[1].Split(new char[] { ':' })[1] == ""test"")
{
responseJsonTxt = "{"msg":"验证通过！"}"; // 测试用
}
else responseJsonTxt = "{"msg":"验证失败！"}";
Response.Write(responseJsonTxt);
Response.End();
}
}jsTest.html引入json.js文件（必须下载json.js文件，否则js报错），如下：
<html> <head> <title>js test</title> <script src="js/json.js" type="text/javascript"></script> <script src="js/testJs.js" type="text/javascript"></script> </head> <body> <form id="form1"> <p> 用户名：<input id="txtUserName" name="txtUserName" type="text" /> 密码：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></p> </form> </body> </html>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
基于ajax的简单搜索实现方法
js与jQuery终止正在发送的ajax请求的方法
ajax调用中ie缓存问题解决方法
热心网友
时间：2022-04-23 01:40
1、前端ajax传递表单数据，类似{name:'zhangsan',age:'17'}
后台只需利用request.getParameter("name")形式即可获取对应的value值。
2、前端传递json数据格式。后台可以直接获取json字符串，然后利用相关的API转成对应的Java对象。或者直接利用springMvc的注解@RequestBody注解。
@RequestMapping(value = "/save")
public void save（@RequestBody User user）{
}
这样传递的json数据会自动封装成user对象。
如果当前传递的是一个json数组，则后端可以定义一个VO对象，vo对象中存放一个userList。
public class UserVO{
private List<User> dataList;
}
@RequestMapping(value = "/save")
public void save（@RequestBody UserVO userVO）{
