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
    评论
利用jquery的ajax方法可以进行前后交互。以下是一个使用JSON进行数据传输的示例: 前代码: ```javascript // 定义要发送的数据 var data = { name: '张三', age: 20, gender: '男' }; // 将数据对象转为JSON字符串 var jsonData = JSON.stringify(data); $.ajax({ url: 'backend.php', // 后接口地址 type: 'POST', // 请求方法为POST data: { jsonData: jsonData // 向后传递JSON数据 }, dataType: 'json', // 预期接收的数据类型为JSON success: function(response) { // 请求成功后的处理逻辑 console.log('后返回的结果为:', response); }, error: function(xhr, status, error) { // 请求失败后的处理逻辑 console.log('请求失败', error); } }); ``` 后代码(使用PHP语言作为示例): ```php // 接收前传递的JSON数据 $jsonData = $_POST['jsonData']; // 将JSON字符串转换为PHP对象 $data = json_decode($jsonData); // 在后进行对传递的数据的处理 $name = $data->name; $age = $data->age; $gender = $data->gender; // 构造要返回给前JSON数据 $response = array( 'result' => 'success', 'message' => '数据接收成功', 'name' => $name, 'age' => $age, 'gender' => $gender ); // 将数据转为JSON字符串 $jsonResponse = json_encode($response); // 返回JSON响应 header('Content-type: application/json'); echo $jsonResponse; ``` 以上就是一个使用jquery的ajax方法进行前后交互,并通过JSON传递数据的示例。前通过ajax发送JSON数据到后,后接收后进行处理后再返回一个JSON响应给前

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值