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是相同的

相关推荐:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值