jQuery Ajax前后端使用JSON进行交互
2016-05-12 13:56
281 查看
需求:
前端通过jquery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端
这里使用servlet的方式
1、采用$.post方法
index.jsp页面
CheckServlet.java代码如下
由于这里采用的是servlet的方式,所以要配置web.xml
在页面输入一个ID,可以在后台接收到并且打印出来,后台通过PrintWriter进行回写JSON返回前端,前端通过eval将JSON变换为Object对象,通过obj.name获取JSON值
2、采用$.get方法,只需要将jsp页面里面的post改为get即可
结果与$.post一样
3、通过$.ajax方法
$.ajax方法也是可以分为post和get方法的,通过修改type来修改发送的方式
结果与方法1是相同的
前端通过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(); } }
由于这里采用的是servlet的方式,所以要配置web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>Ajax</display-name> <servlet> <servlet-name>CheckServlet</servlet-name> <servlet-class>com.ajax.CheckServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CheckServlet</servlet-name> <url-pattern>/Ajax/CheckServlet</url-pattern> </servlet-mapping> </web-app>
在页面输入一个ID,可以在后台接收到并且打印出来,后台通过PrintWriter进行回写JSON返回前端,前端通过eval将JSON变换为Object对象,通过obj.name获取JSON值
2、采用$.get方法,只需要将jsp页面里面的post改为get即可
<!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() { $.get( '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>
结果与$.post一样
3、通过$.ajax方法
<!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() { $.ajax({ type : 'post', data : { userid : $("#userid").val(), sex : "男" }, url : "Ajax/CheckServlet", success : function(data) { var obj = eval('(' + data + ')'); alert(obj.success); }, error : function() { }, complete : function() { } }); } </script> </head> <body> 用户ID: <input type="text" id="userid" name="userid"> <span id="msg"></span> <br> <button onclick="checkUserid()">传输</button> </body> </html>
$.ajax方法也是可以分为post和get方法的,通过修改type来修改发送的方式
结果与方法1是相同的
相关文章推荐
- 聊聊jQuery的反模式
- 基于jQuery的一个简单的图片查看器实现
- CSS3和jQuery实现的自定义美化Checkbox
- phpQuery—基于jQuery的PHP实现
- jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断
- JQUERY加载中提示方法
- 那些被漏掉的JQuery总结(一)——Window.Onload和document.ready的对比(补充Page_load)
- $.extend()方法和(function($){...})(jQuery)详解
- jQuery Ajax【上】
- jQuery 遍历 - find() 方法
- jquery设置元素的readonly和disabled
- jQuery中读取json文件
- jquery的冒泡事件event.stopPropagation()
- Lifeary 6.2 使用 JQuery 向后台提交值
- jquery中的图片放大镜插件--jqzoom的配置参数
- jQuery对下拉框Select操作总结
- jQuery判断checkbox选中状态
- Autocomplete 自动补全JQuery
- jquery ajax局部加载方法详解(实现代码)
- jquery选择器返回值