87,909
社区成员
发帖
与我相关
我的任务
分享用jQuery进行ajax与后台的交互出现问题
刚开始学习利用jQuery进行ajax与后台的交互，参考网上设定如下三个档，但页面一载入就发生三个错(404,4,error)，填入资料提交后ie8显示在js的第46行有对象不支持方法，请教怎么解决?
使用ie8测试
jQuery-1.8.3.js
json2.js
js
jsp
servlet
使用ie8测试
jQuery-1.8.3.js
json2.js
js
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(document).ready(
function() {
jQuery.ajax( {
type : 'GET',
url : 'jasonServlet',
dataType: 'json', //返回值类型
success : function(data) {
//if (data && data.success == "true") {
if (data) {
alert(data);
$.each(data, function(i, item) {
$('#info').html("共" + item.total + "条数据。<br/>"+item.success+"<br/>");
// $.each(data.data, function(i, item) {
$.each(item.data, function(i, item) {
$('#info').append(
"编号：" + item.id + "，姓名：" + item.username + "，年龄：" + item.age);
});
});
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
$("#submit").click(function() {
var jsonuserinfo = $.toJSON($('#form').serializeObject());
alert(jsonuserinfo);
jQuery.ajax( {
type : 'POST',
contentType : 'application/json',
url : 'http://localhost:8081/TPVFrames/CheckUserLogin',
data : jsonuserinfo,
dataType : 'json',
success : function(data) {
alert("新增成功！");
},
error : function(data) {
alert("error");
}
});
});
});
jsp
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spring MVC</title>
<script type="text/javascript" src="javascript/jquery-1.8.3.js"></script>
<script type="text/javascript" src="javascript/json2.js"></script>
<script type="text/javascript" src="javascript/for_jQuery_ajax_servlet.js"></script>
</head>
<body>
<div id="info"></div>
<form action="add" method="post" id="form">
id：<input type="text" name="id"/>
name：<input type="text" name="username"/>
age：<input type="text" name="age"/>
<input id="submit" type="button" value="提交"/>
</form>
</body>
</html>
servlet
public class CheckUserLogin extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckUserLogin() {
super();
}
public void init() throws ServletException {
// Put your code here
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
String userStr = readJSONString(request);// 得到requestContext
JSONObject jsonObj = JSONObject.fromObject(userStr);// 转换成JSONObject
System.out.println(jsonObj.getInt("id"));// 得到JSONObject的userId值
System.out.println(jsonObj.getString("username"));
System.out.println(jsonObj.getString("age"));
JSONObject resultJSON = new JSONObject();// 构建一个JSONObject
resultJSON.accumulate("errNum", 1);
resultJSON.accumulate("errInfo", "成功");
response.setContentType("application/x-json");// 需要设置ContentType为"application/x-json"
PrintWriter out = response.getWriter();
out.println(resultJSON.toString());// 向客户端输出JSONObject字符串
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
public String readJSONString(HttpServletRequest request) {
StringBuffer json = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while ((line = reader.readLine()) != null) {
json.append(line);
}
} catch (Exception e) {
System.out.println(e.toString());
}
return json.toString();
}
...全文
请发表友善的回复…
发表回复
cscxxx 2013-02-23
- 打赏
- 举报
非常感谢版主协助
并参考网上的讲解完成一些修改如下:
JSP
<body>
<form name="nameForm" id="nameForm" method="post" action="javascript:login()">
email：<input id="email" type="text" name="email"/>
<input id="submit" type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
function login(){
$("#loading").hide();
var email = document.nameForm.email.value;
var formdata = $('#nameForm').serialize();
alert(formdata);
$.ajax({
type: "GET",
url: "ProcessFormServlet",
data: formdata,
success: function(result){
alert(result);
}
});
}
</script>
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
String emailname = request.getParameter("email");
System.out.println(emailname);
PrintWriter out = response.getWriter();
out.println(emailname);
}
cscxxx 2013-02-23
- 打赏
- 举报
后来为了解决问题，将问题各别实现后再将功能整成一块:
1.先实现一个jquery能与servlet交互的功能(主要学习其中的设置)。
2.再把json的功能补上。
cscxxx 2013-02-23
- 打赏
- 举报
改了，但有二个问题:
1.后端接收不到任何数据，readJSONString(request)打印出来是空。
2.url的设置找了网上说应该是原来的页面，实际上应该填什么?(原来的页面?还是填servlet的名称?)
js的post部份修改后:
$("#submit").click(function() {
// var jsonuserinfo = $.toJSON($('#form').serializeObject());
// alert(jsonuserinfo);
jQuery.ajax( {
type : 'POST',
contentType : 'application/json',
url : 'http://localhost:8080/TPVFrames/for_jQuery_ajax_servlet.jsp',
data :$('#form').serialize(),
dataType : 'json',
success : function(data) {
alert("新增成功！");
},
error : function(data) {
alert("error");
}
});
}
Go 旅城通票 2013-02-22
- 打赏
- 举报
var jsonuserinfo = $.toJSON($('#form').serializeObject());
jquery没有toJSON这个静态方法。serializeObject这个方法觉得没必要扩展了，jq已经有serialize方法将表单序列化为键值对字符串了。
//var jsonuserinfo = $.toJSON($('#form').serializeObject());
// alert(jsonuserinfo);
jQuery.ajax( {
type : 'POST',
contentType : 'application/json',
url : 'http://localhost:8081/TPVFrames/CheckUserLogin',
data :$('#form').serialize()// jsonuserinfo,///直接这样就好了。。
dataType : 'json',
success : function(data) {
alert("新增成功！");
},
error : function(data) {
alert("error");
}
});cscxxx 2013-02-22
- 打赏
- 举报
只剩下提交后行号44出现问题。
cscxxx 2013-02-22
- 打赏
- 举报
页面加载后立即出现问题!
另外提交后在js的post那边的44行就有问题!
菜牛 2013-02-22
- 打赏
- 举报
到底是哪一行呀。
bbjbepzz 2013-02-22
- 打赏
- 举报
我感觉这个写错了，多了个a吧。
url : 'jasonServlet',
jsonServlet
