JQuery中的AJAX使用

最新推荐文章于 2022-10-05 01:06:56 发布

notfoundkkk

最新推荐文章于 2022-10-05 01:06:56 发布

阅读量411

点赞数

分类专栏： Java-Web 文章标签： jquery ajax

本文链接：https://blog.csdn.net/u011383131/article/details/51190374

版权

Java-Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

概述

本篇主要介绍JQuery中的AJAX以及如何与后台（Java Web）进行数据交换

为什么使用AJAX？

AJAX是Asynchronous Javascript And XML的简称，虽然提到了XML，但是现在多用json作为数据交换格式；

顾名思义就是异步的使用JS和XML进行传送数据的方式，这里，异步是关键；之前我们传送数据，多是发送请求，接受响应，是一种同步的方式，获得数据需要刷新整个页面，这样的用户体验不好，多使用异步的方式，可以让用户在接收服务器传回的数据时继续做别的事情，从而改善用户的体验，也节省了传输数据的量。

JQuery中AJAX的使用

JQuery为我们封装了更好的方法来对AJAX进行操作，比如相对底层的$.ajax()方法，之后有get/post方法，然后有load方法。其实我们一般使用更高层的方法就足够了，但是要实现更复杂的操作，还是要使用.ajax方法，接下来，我就以ajax方法为例。

列举了一些常用的方法

$.ajax({
url:"",//请求发送的地址
dataType:"",//返回的数据类型json/xml等
type:"",//get或者post方法
data:{"key1":"val1","key2":"val2"},//可以为对象，字符串，数组，但都是键值对存在的
async:"",//是否为异步的，默认为true
beforeSend:function(){},//发送之前调用的方法
complete:function(){},//发送完成调用的函数
success:function(){},//发送成功调用的函数
error:function(){}//发送失败调用的函数
});

代码示例

sign_up.jsp

<%--
 User: KevinTLee Date: 2016-04-18 Time: 18:57--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="js/jquery-2.2.3.min.js"></script>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <title>Sign Up</title>
    <script>
        $(document).ready(function () {
            var msg = "";
  $(".username").blur(function () {
 /*$.post("/check", {"username": $(".username").val()}, function (json) {
 var data=JSON.parse(json);//需要将返回的字符串解析成json对象
 alert(data);
 if (data.msg == 1 || $(".username").val() == '') $(".msg").html("不可用");//返回为1或者为空表示不可用
 else
 $(".msg").html("可用");
 });*/
  $.ajax({
  url: "/check",
  dataType: "json",
  type: "post",
  data: {"username": $(".username").val()},
  error:function(){
  alert("error");
  },
  success: function (data) {
  //alert(data.msg);
  $(".msg").html(data.msg);
  }
  })
  });
  });
  </script>
</head>
<body>
<form class="signup">
    <div class="box">
        <p><label for="username">User:</label></p>

        <p><input id="username" class="username" type="text"/><span class="msg"></span></p>

        <p><label for="password">Password:</label></p>

        <p><input id="password" class="password" type="password"/></p>
    </div>
</form>
</body>
</html>

Check.java

package  com.lidengju.servlet;

import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
import  java.io.IOException;
import  java.io.PrintWriter;

/**
 * Created by KevinLee 2016-04-18 18:53. */
  public  class  Check  extends  HttpServlet {
  private  String[] usernames = {"kevin", "bob", "stuart"};//用于测试的数据
  private  String  username = null;

  protected  void  doPost(HttpServletRequest request, HttpServletResponse response) throws  ServletException, IOException  {
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  username = request.getParameter("username");
  String  msg = "用户名可以使用！";
  int  used=0;
  System.out.println("---Post---");
  PrintWriter  pw = response.getWriter();//通过这个来返回数据
  for  (String  str : usernames) {
            if  (str.equals(username)||"".equals(username)) {
                msg = "该用户名不正确或已经存在！";
                used=1;
                System.out.println("~~~"+msg);
                }
        }
        //pw.print("{\"msg\":\""+used+"\"}");
        pw.print("{\"msg\":\""+msg+"\"}");//输出json格式
        pw.close();
  }

    protected  void  doGet(HttpServletRequest request, HttpServletResponse response) throws  ServletException, IOException  {
        doPost(request, response);
  }
}

配置servlet到web.xml,或者使用注解方式（其实我偏爱注解一点）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1">

    <servlet>
        <servlet-name>check</servlet-name>
        <servlet-class>com.lidengju.servlet.Check</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>check</servlet-name>
        <url-pattern>/check</url-pattern>
    </servlet-mapping>

</web-app>

演示效果

demo

写在后面

可以看到，我们使用post方法，其中没有指定传输的格式，返回的数据是字符串，需要我们把它解析成json对象；而使用ajax方法，我们指定了dataType为json，它会直接返回json对象。

notfoundkkk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的AJAX使用

概述本篇主要介绍JQuery中的AJAX以及如何与后台进行数据交换为什么使用AJAX？ AJAX是Asynchronous Javascript And XML的简称，虽然提到了XML，但是现在多用json作为数据交换格式；顾名思义就是异步的使用JS和XML进行传送数据的方式，这里，异步是关键；之前我们传送数据，多是发送请求，接受响应，是一种同步的方式，获得数据需要刷新整个页面，这样的
复制链接

扫一扫

专栏目录