欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery Ajax前后端使用JSON进行交互示例

程序员文章站 2022-05-12 19:59:20
需求： 前端通过jquery ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端 这里使用servlet的方式 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是相同的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Win8系统每次开机gwx.exe进程都会自动启动的解决方法图文教程

下一篇： Nodejs基于LRU算法实现的缓存处理操作示例

推荐阅读