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

需求：

前端通过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是相同的

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

赞 (0)

相关推荐

  • 关于前后端json数据的发送与接收详解

    前言 最近因为笔者后台使用的是flask框架接收和前端使用的是原生的JavaScript和jQuery的ajax发送,能力有限,在此仅写下我开发项目过程中所得,分享出来供大家参考学习,下面话不多说,跟着小编来一起看看详细的介绍: 一.flask中的json数据接收 1.利用flask的request.form.get()方法 Python后台部分代码 from flask import Flask from flask import jsonify from flask import reque

  • java web SpringMVC后端传json数据到前端页面实例代码

    下面的后台的代码:目的的查询数据库中的所有省的列表,然后转化为json传到前端页面 @Controller public class DistrictController { @Resource private ProvinceService provinceServiceImp; @Resource private CityService cityServiceImp; @Resource private TourSpotService tourSpotServiceImp; /** * 获取

  • JAVA实现JSON后端向前端传递数据

    1 后端两个辅助类 ConcurrentDateUtil.Java,用于生成我们需要格式的时间 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public class ConcurrentDateUtil { private static ThreadLocal<DateFormat> threadLo

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

    需求: 前端通过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"> <%

  • SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

    SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

    目录 前言 获取参数的几种常用注解 一.请求路径参数get请求 二.Body参数POST请求 四.HttpServletRequest 五.参数校检 最终选择交互方式 参考文献 总结 前言 现在大多数互联网项目都是采用前后端分离的方式开发,前端人员负责页面展示和数据获取,后端负责业务逻辑处理和接口封装.当与前端交互的过程当中,常用json数据与前端进行交互,这样想取出前端传送过来的json数据的时候,就需要用到@RequestBody这个注解.@RequestBody注解用于读取http请求的内

  • jQuery+ajax+asp.net获取Json值的方法

    本文实例讲述了jQuery+ajax+asp.net获取Json值的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQueryAjaxJson取值示例</title> <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js&

  • jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id&quo

  • PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

    PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

    1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax做分页</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="Ajax_

  • Docker部署前后端分离项目的实现示例

    Docker部署前后端分离项目的实现示例

    目录 一.环境准备 二.运行镜像 解决问题 Redis安装 Nginx安装 三.打包项目 四.部署 一.环境准备 服务器 阿里云服务器 1核+2GB即可 软件 本次部署采用的是 docker,因此软件环境都在 docker 上 我们需要 MySQL 8.0.x版本,Redis,Nginx,提前下好镜像即可 二.运行镜像 MySQL安装 MySQL我用的是8.0.x的版本,在部署过程中出现了一些问题,在这里跟大家分享一下 docker run \ -p 3306:3306 \ --name mys

  • flask和vue前后端分离项目部署的示例代码

    前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下. 部署环境:centos6.5.Python3.6.3 .flask0.12.0 vue 部署方式:uwsgi+nginx 步骤: ​ 1.首先安装python运行环境,正常 ​ 2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi): 新建config.ini文件 [uwsgi] # uwsgi 启动时所使用的地址与端口,ngin

  • Java前后端分离之权限管理示例分析

    Java前后端分离之权限管理示例分析

    目录 1.前端界面 1.1 按钮 1.2 对话框+树形控件 2.后端操作 2.1 controller层 2.2 serviceImpl层 2.3 结果展示 2.4 查对应的权限菜单(使用中间表) 2.4.1 后端处理(权限回显) 2.4.2 前端处理 2.4.3 后端处理(确定修改权限) 1.前端界面 1.1 按钮 借助elementui中的表格部分 <template slot-scope="scope"> <el-button @click="perm

  • jQuery中ajax和post处理json的不同示例对比

    近日在做门户的用户评论时,好长时间没有用jquery了正好用一下,没想到偷工用了post方法去处理ajax回调的json数据,死活取不到,后台就是有json返回了.不料这么小小一个问题挂了我好几个小时,后来我ajax方法处理,居然OK,一比较发现原来post方法回调json必须eval一下,而ajax方法做了默认处理了. 望各位小心. function haha() { jQuery.post("addComment!comment.action", function aa(data)

  • jquery+ajax实现省市区三级联动效果简单示例

    本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三

随机推荐