jQuery Ajax前后端使用JSON进行交互示例
152 浏览量
2020-10-20
04:31:39
上传
评论 2
收藏 44KB PDF 举报
jQuery Ajax前后端使用前后端使用JSON进行交互示例进行交互示例
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例，实现前端通过jQuery Ajax传输json到后端，后
端接收json，对json进行处理，后端返回一个json给前端，有兴趣的可以了解一下。
需求：
前端通过jQuery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端
这里使用servlet的方式
1、采用$.post方法
index.jsp页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<script src="js/jquery-1.12.2.js"></script>
<script language="JavaScript">
function checkUserid() {
$.post('Ajax/CheckServlet',//url
{
userid : $("#userid").val(),
sex : "男"
}, function(data) {
var obj = eval('(' + data + ')');
alert(obj.success);
});
}
</script>
</head>
<body>
用户ID:
<input type="text" id="userid" name="userid"> <span id="msg"></span>
<br> <button onclick="checkUserid()">传输</button>
</body>
</html>
CheckServlet.Java代码如下
package com.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*设置字符集为'UTF-8'*/
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String userid = request.getParameter("userid"); // 接收userid
String sex = request.getParameter("sex");//接收性别
System.out.println(userid);
System.out.println(sex);
//写返回的JSON
PrintWriter pw = response.getWriter();
String json = "{'success':'成功','false':'失败'}";
pw.print(json);
pw.flush();
pw.close();
}
资源评论
