springmvc 前端 发ajax请求的几种方式
时间： 17:10:34
&&&& 阅读：274
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&一.传json单值或对象
1 var data = {‘id‘:id,‘name‘:name};
2 $.ajax({
type:"POST",
url:"user/saveUser",
dataType:"json",
//contentType:"application/json", //不能添加这个头
data:data, //这里不能进行JSON.stringify,发送请求的数据在:form data
success:function(data){
//看成单值
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(@RequestParam int id,String name) { //这里字段要跟前端一致，@RequsetParam 可以不加，默认调用的就是它
//看成对象
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(User user) { //前端字段跟对象属性一致
//自动转化成改对象
二.json对象转成字符串后传值
type:"POST",
url:"user/saveUser",
dataType:"json",
contentType:"application/json", //需添加这个头
data:JSON.stringify(data), //发送请求的数据在request payload
success:function(data){
//看成对象
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(@RequestBody User user) { //需添加RequestBody注解
//自动转化成改对象
三.将对象JSON.stringify后，以第一种方式传递，可实现对象中存对象 {‘userList‘:users,‘key1‘:value1}
var user = {‘id‘:id,‘name‘:name};
var jsonStrGoods = JSON.stringify({‘gid‘:gid,...});
type:"POST",
url:"user/saveUser",
dataType:"json",
// contentType:"application/json", //不添加这个头
data:{‘user‘:JSON.stringify(user),‘goods‘:jsonStrGoods }, //发送请求的数据在request payload
success:function(data){
//看成单值
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(@RequestParam String user,String goods) { //这里字段要跟前端一致，@RequsetParam 可以不加，默认调用的就是它
User u= JSON.parseObject(user, User .class);//alibaba.fastjson转换成对象
//看成对象
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(UserAndGoods ug) { //没试过，猜测应该是这样，前端字段跟对象属性一致
//自动转化成改对象
总结：1.如果用JSON.stringify()将对象转成字符串，就需要在ajax请求中指定contentType 为 application/json,且后台需添加 @RequestBody注解；
　　　2.如果直接传json对象则跟上面的相反，不能指定contentType为 application/json，其默认类型是 application/x-www-form-urlencoded&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/oyx305/p/5220751.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！前端和后台接口理解_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
前端和后台接口理解
&&J2EE前端和后台接口的理解
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢前台通过JS请求后台的几种方法 - CSDN博客
前台通过JS请求后台的几种方法
1.1通过设置form action的路径请求后台方法&
在Structs框架下的一个上传文件的例子，前台html页面部分代码:
&form action=&Test!UploadFile.action& enctype=&multipart/form-data& method=&post&&
用户名:&input type=&text& name=&username& &
文件名:&input type=&file& name=&myFile&&
&input type=&submit& value=&提交& class=&file& /&
&/form&1234512345
后台对应的函数
public String myFileFileN
public String myFileContentT
public File myF
public void UploadFile() throws IOException{
InputStream is = new FileInputStream(myFile);
String uploadPath = ServletActionContext.getServletContext().getRealPath(&/Upload&);
File tmpFile = new File(uploadPath);
if (!tmpFile.exists()) {
tmpFile.mkdir();
File toFile = new File(uploadPath, myFileFileName);
OutputStream os = new FileOutputStream(toFile);
byte[] buffer = new byte[1024];
int length = 0;
while ((length = is.read(buffer)) & 0) {
os.write(buffer, 0, length);
is.close();
os.close();
}1234567891011121314151617181920212223242526272829303112345678910111213141516171819202122232425262728293031
1.2通过改变带有路径属性的元素得路径&
前台html页面部分代码:
id=&imgCode& src=&toCode& onclick=&ChangeCode()& style=&padding-top:8px&/&
type=&text/javascript&&
function ChangeCode()
var img = document.getElementById(&imgCode&);
img.src = 'Test!getCode.action?time='+new Date().getTime();
&1234567812345678
后台对应的java方法
//生成验证码
private static Font VALIDATECODE_FONT = new Font(&Times New Roman &,Font.PLAIN, 21)
public void getCode() {
response.setHeader(&Pragma&, &No-cache&)
response.setHeader(&Cache-Control&, &no-cache&)
response.setDateHeader(&Expires&, 0)
response.setContentType(&image/jpeg&)
// 在内存中创建图象
BufferedImage image = new BufferedImage(80, 30,BufferedImage.TYPE_INT_RGB)
// 获取图形上下文
Graphics g = image.getGraphics()
// 设定背景色
g.setColor(Color.white)
g.fillRect(0, 0, 80, 30)
g.setColor(Color.blue)
g.drawRect(0, 0, 80 - 1, 30 - 1)
Long validate = new Long(10000 + Math.round((Math.random() * 90000)))
String validateCode = validate.toString()
// 将认证码显示到图象中
g.setColor(Color.black)
g.setFont(VALIDATECODE_FONT)
g.drawString(validateCode.toString(), 10, 22)
// 随机产生88个干扰点,使图象中的认证码不易被其它程序探测到
Random random = new Random()
for (int iIndex = 0
int x = random.nextInt(80)
int y = random.nextInt(30)
g.drawLine(x, y, x, y)
// 图象生效
g.dispose()
// 输出图象到页面
ServletOutputStream sos = response.getOutputStream()
ImageIO.write(image, &jpeg&, sos)
sos.close()
} catch (Exception e) {
}1234567891011121314151617181920212223242526272829303132333435363738394012345678910111213141516171819202122232425262728293031323334353637383940
1.3使用Ajax（异步和XML）请求后台方法&
前台html页面部分代码:
async : false,
cache : false,
timeout: 1000,
url: 'Test!sendDate.action?time='+new Date().getTime(),
type: &post&,
data:{&username&:&1&,&userpass&:2,&validate&:3},
success: function(data){
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
1234567891011121314151612345678910111213141516
1.4使用Service sent Event&
前台html页面部分代码:
align=&center&&
& type=&button& value=&Server& onclick=&ServerSent()&&&
& id=&ConnectInfor& type=&text& value=&服务器推送事件&&&
& id=&pushData& type=&text& value=&服务器推送事件&&&
& id=&errorData& type=&text& value=&服务器推送事件&&&
type=&text/javascript&&
function ServerSent() {
if (typeof (EventSource) !== &undefined&) {
var source = new EventSource(&Test_SSE!ServicePush.action&);
source.onopen = function(event) {
document.getElementById(&ConnectInfor&).value = &链接成功&+this.readyS
source.onmessage = function(event) {
document.getElementById(&pushData&).value = event.data+&/&+this.readyS
source.onerror = function(event) {
document.getElementById(&errorData&).value = &发生错误&+this.readyS
}catch(err){
alert('出错啦，错误信息：'+err.message);
document.getElementById(&ConnectInfor&).innerHTML = &抱歉，你的浏览器不支持 server-sent 事件...&;
&123456789101112131415161718192021222324252627282930313233123456789101112131415161718192021222324252627282930313233
后台对应的java方法
public void ServicePush(){
long str = System.currentTimeMillis();
backMessage(str+&&);
public void backMessage(String str){
response.setContentType(&text/event-stream&);
response.setCharacterEncoding(&UTF-8&);
PrintWriter pw = response.getWriter();
pw.write(&data: &+ str +&\n\n&);
pw.close();
} catch (IOException e) {
e.printStackTrace();
}123456789101112131415123456789101112131415
1.5使用WebSocket
前台对应html部分代码：
align=&center&&
& type=&button& value=&退出&
onclick=&Chat.socket.onclose()&&&
& type=&button& value=&连接&
onclick=&Chat.socket.onopen()&&&
& type=&button& value=&WebSocket&
onclick=&Chat.socket.sendMessage()&&&
& id=&chat& type=&text& value=&服务器推送事件&&&
id=&console&&&
type=&text/javascript&&
var Chat = {};
Chat.socket = null;
Chat.connect = (function(host) {
if ('WebSocket' in window) {
Chat.socket = new WebSocket(host);
} else if ('MozWebSocket' in window) {
Chat.socket = new MozWebSocket(host);
Console.log('错误:您的浏览器不支持WebSocket');
Chat.socket.onopen = function() {
Console.log('提示: 您已经进入了聊天室');
document.getElementById('chat').onkeydown = function(event) {
if (event.keyCode == 13) {
Chat.sendMessage();
Chat.socket.onclose = function() {
document.getElementById('chat').onkeydown = null;
Console.log('提示: 您退出了聊天室');
Chat.socket.onmessage = function(message) {
Console.log(message.data);
Chat.initialize = function() {
if (window.location.protocol == 'http:') {
Chat.connect('ws://localhost:8080/ShowDate/WebSocket');
Chat.connect('ws://localhost:8080/ShowDate/WebSocket');
Chat.sendMessage = (function() {
var message = document.getElementById('chat').
if (message != '') {
Chat.socket.send(message);
document.getElementById('chat').value = '';
var Console = {};
Console.log = (function(message) {
var console = document.getElementById('console');
var p = document.createElement('p');
p.style.wordWrap = 'break-word';
p.innerHTML =
console.appendChild(p);
while (console.childNodes.length & 25) {
console.removeChild(console.firstChild);
console.scrollTop = console.scrollH
Chat.initialize();
&1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818212345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
后台对应的整个类
import java.io.IOE
import java.util.S
import java.util.concurrent.CopyOnWriteArrayS
import java.util.concurrent.atomic.AtomicI
import javax.websocket.OnC
import javax.websocket.OnE
import javax.websocket.OnM
import javax.websocket.OnO
import javax.websocket.S
import javax.websocket.server.ServerE
@ServerEndpoint(&/WebSocket&)
public class WebSocket {
private static final String GUEST_PREFIX = &用户&;
private static final AtomicInteger connectionIds = new AtomicInteger(0);
private static final Set&WebSocket& connections = new CopyOnWriteArraySet&&();
private final S
public WebSocket() {
nickname = GUEST_PREFIX + connectionIds.getAndIncrement();
public void start(Session session) {
this.session =
connections.add(this);
String message = String.format(&%s %s&, nickname, &加入了聊天室&);
broadcast(message);
public void end() {
connections.remove(this);
String message = String.format(&%s %s&, nickname, &已经断开连接&);
broadcast(message);
@OnMessage
public void incoming(String message) {
broadcast(message);
public void onError(Throwable t) throws Throwable {
System.out.println(&聊天错误: & + t.toString());
private static void broadcast(String msg) {
for (WebSocket client : connections) {
synchronized (client) {
client.session.getBasicRemote().sendText(msg);
} catch (IOException e) {
System.out.println(&聊天错误: 未能发送消息到客户端&);
connections.remove(client);
client.session.close();
} catch (IOException e1) {
String message = String.format(&%s %s&, client.nickname,
&已经断开连接&);
broadcast(message);
总结:目前js请求后台数据的几种方式有1.form表单提交2.ajax请求3.jsonp请求4.EventSource(HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。)5.WebSocket(HTML5一种新的协议,浏览器与服务器全双工通信)6.iframe的postMessage(貌似然并卵)其中jsonp和WebSocket支持跨域，form表单可以跨域提交，但是得不到返回值。ajax不支持跨域。EventSource似乎也支持跨域后续或许会不断补充方法
本文已收录于以下专栏：
相关文章推荐
前台js请求后台的几种方法的汇总
由于网络太差，只能等稍后好点了再发表正文（由于文中有图片，内容多，发表多次都未成功）
JS调用后台方法大全
javascript函数中执行C#代码中的函数：
方法一：1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中;
2、在前台写一个js函数，内容为d...
javascript函数中执行C#代码中的函数：
方法一：1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中;
2、在前台写一个js函数，内容为d...
做web开发，用的技术是aspx.net，可是由于比较习惯于ASP现在做起来，觉得非常别扭，原因在于有很多功能其实在前台可以处理的，但是因为用到了很多webcontrol，导致不断postback。如...
1、WebMethod
public static方法，ajax/PageMethods调用。
[WebMethod]
public static string GetUserNam...
第一种，在页面的时候调用：
cs后台代码：
C#代码  
protected void Page_Load(object sender, EventArgs e)...
在我们平时的网站开发过程中，并不是所有的网页都是后台查询出一个DataTable或者List然后绑定到DataGrid上。我们可能还会遇到前台需要后台的某一个变量，或者前台某个显示的地方需要调用一下后...
他的最新文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)博客分类：
&& javascript跨域访问是web开发者经常遇到的问题，什么是跨域，一个域上加载的脚本获取或操作另一个域上的文档属性，下面将列出三种实现javascript跨域方法:
1.基于iframe实现跨域
&&&& 基于iframe实现的跨域要求两个域具有,这种特点，也就是两个页面必须属于一个基础域（例如都是，或是.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数，代码如下：
页面一：
&html&
document.domain = "xx.com";
function aa(){
alert("p");
&iframe src="http://localhost:8080/CmsUI/2.html" id="i"&
document.getElementById('i').onload = function(){
var d = document.getElementById('i').contentW
&/html&
页面二：
&html&
document.domain = "xx.com";
function a(){
alert("c");
&/html&
这时候父页面就可以调用子页面的a函数，实现js跨域访问
2.基于script标签实现跨域
&&&& script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建script标签，代码如下：
var script = document.createElement('script');
script.src = "/js/*.js";
document.body.appendChild(script);
& && 这样通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档，只能是js文件，jsonp便是通过这种方式实现的，jsonp通过向其它域传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案。
3.后台代理方式
&&&& 这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域。
浏览 46600
浏览: 193156 次
来自: 北京
我是沙发，第一次做，不见怪
[flash=200,200][/flash]
不错，谢谢！
iccboy 写道请问博主，这个和commons-httpcl ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'其他回答(5)
这个问题好哦
数据都是在后台计算，重要数据都是后台自己从数据库查询出来，都不能用js处理传递这些值的。
园豆：9378
永远不要相信客户端提交的数据就行了。
收获园豆：5
园豆：25522
https为什么会没有可行性...
md5校验如果是从前端传到后台是不现实的.原因你自己也说了.
而且你的用户修改是在传输之前修改的吧,如果是用户要修改发送的数据是无解的,所有的安全手段都是保证用户发送给服务端的数据不被第三方修改.用户自己当然能决定发什么数据给你服务端.
这种需求你要做的是在服务端做数据正确性校验..而不是保障传输安全
收获园豆：14
园豆：23865
园豆：1940
园豆：25522
园豆：23865
园豆：23865
园豆：23865
园豆：25522
园豆：25522
不关心数据来源，关注数据的正确性。重点在对数据的验证上。。
收获园豆：1
园豆：34865
园豆：34865
园豆：34865
&&&您需要以后才能回答，未注册用户请先。