java前后端ajax交互,Ajax前后端使用JSON进行交互实现方法

本文主要介绍了jQuery Ajax前后端使用JSON进行交互示例，实现前端通过jQuery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端，有兴趣的可以了解一下，希望能帮助到大家。

需求：

前端通过jQuery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端

这里使用servlet的方式

1、采用$.post方法

index.jsp页面

function checkUserid() {

$.post('Ajax/CheckServlet',//url

{

userid : $("#userid").val(),

sex : "男"

}, function(data) {

var obj = eval('(' + data + ')');

alert(obj.success);

});

}

用户ID:

传输

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

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">

Ajax

CheckServlet

com.ajax.CheckServlet

CheckServlet

/Ajax/CheckServlet

在页面输入一个ID，可以在后台接收到并且打印出来，后台通过PrintWriter进行回写JSON返回前端，前端通过eval将JSON变换为Object对象，通过obj.name获取JSON值

2、采用$.get方法，只需要将jsp页面里面的post改为get即可

function checkUserid() {

$.get(

'Ajax/CheckServlet',//url

{

userid:$("#userid").val(),

sex:"男"

},

function(data){

var obj = eval('('+data+')');

alert(obj.success);

}

);

}

用户ID:

传输

结果与$.post一样

3、通过$.ajax方法

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() {

}

});

}

用户ID:

传输

$.ajax方法也是可以分为post和get方法的，通过修改type来修改发送的方式

结果与方法1是相同的

相关推荐：