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

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

需求：

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

这里使用servlet的方式

1、采用$.post方法

index.jsp页面

 
<%@ page contentType="text/html; charset=UTF-8"%> 
 
 
 
 
 
 
 
  用户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

 
 
  Ajax 
 
   
    CheckServlet 
    com.ajax.CheckServlet 
   
   
    CheckServlet 
    /Ajax/CheckServlet 
   

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

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

芝麻乐开源众筹cms系统

芝麻乐开源众筹系统采用php+mysql开发，基于MVC开发，适用于各类互联网金融公司使用，程序具备模板分离技术，您可以根据您的需要进行应用扩展来达到更加强大功能。前端使用pintuer、jquery、layer等....系统易于使用和扩展简单的安装和升级向导多重业务逻辑判断，预防出现bug后台图表数据方式，一目了然后台包含但不限于以下功能：用户认证角色管理节点管理管理员管理上传配置支付配置短信平

下载

 
<%@ page contentType="text/html; charset=UTF-8"%> 
 
 
 
 
 
 
 
 
  用户ID: 
    
    
 
      传输 
 

结果与$.post一样

3、通过$.ajax方法

 
<%@ page contentType="text/html; charset=UTF-8"%> 
 
 
 
 
 
 
 
 
  用户ID: 
    
    
 
      传输 
 

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

结果与方法1是相同的

相关推荐：

javascript将url解析为json格式的两种方法

完全掌握jsonp的原理和实现方式

JS获取一个表单字段中多条数据并转化为json格式实例分享