JQuery——Ajax

最新推荐文章于 2024-09-03 01:23:13 发布

原创最新推荐文章于 2024-09-03 01:23:13 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #Ajax

JQuery 专栏收录该内容

4 篇文章

订阅专栏

1. AJAX load() 方法

从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

2. AJAX get() 和 post() 方法

2.1 get() 方法

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

2.2 post() 方法

语法:

$.post(URL,data,callback);

必需的 URL 参数规定请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

前端代码：

<%--
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <h3><a href="demo01.jsp">demo01</a></h3>
    <h3><a href="demo02.jsp">demo02</a></h3>
    <h3><a href="demo03.jsp">demo03</a></h3>
    <h3><a href="demo04.jsp">demo04</a></h3>
    <h3><a href="demo05.jsp">demo05</a></h3>
    <h3><a href="demo06.jsp">demo06</a></h3>

</center>
</body>
</html>
--%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JQuery ajax</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#load").click(function () {
                $("div").load("../ajax?action=load",{name:"张三"},function(resptxt,status,xhr){
                    if(status=="success"){
                        alert("加载成功!");
                    }
                    if(status == "error"){
                        alert("Erro:"+xhr.status+":"+xhr.statusText);
                    }
                });

            });


        		$("#email").blur(function () {
                $.get("../ajax?action=getPost&email="+$("#email").val(),function (data, status) {
                    if (data == 1) {
                        $("#cont1").html("<font color=\"red\">已注册</font>");
                    }else {
                        $("#cont1").html("<font color=\"green\">未注册</font>");
                    }
                });
            });

        }); 
        
        /* $("#email").blur(function () {
            $.post("../ajax?action=getPost",{email : $("#email").val()},function (data, status) {
                if (data == 1) {
                    $("#cont1").html("<font color=\"red\">已注册</font>");
                }else {
                    $("#cont1").html("<font color=\"green\">未注册</font>");
                }
            });
        }); 

    });*/

    </script>
</head>
<body>
<center>
    <button type="button" id="load">加载数据</button><br>
     <div></div><br/>
    

    email:<input type="email" id ="email"/><span id="cont1"></span><br>
    密码:<input type="password">

</center>

</body>
</html>

服务器端代码：

package com.zth;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ajax")
public class MyServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		req.setCharacterEncoding("utf-8");
		String action = req.getParameter("action");
		
		if("load".equals(action)) {
			this.load(req, resp);
		}else if("getPost".equals(action)) {
			this.getPost(req, resp);
		}
	}
	

	protected void load(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		req.setCharacterEncoding("utf-8");
		
		String name = req.getParameter("name");
		
		PrintWriter out = resp.getWriter();
		out.println("Welcome "+name+"!");
		out.close();
	}
	
	protected void getPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		req.setCharacterEncoding("utf-8");
		PrintWriter out = resp.getWriter();
		
		String email = req.getParameter("email");
		
		if("admin@qq.com".equals(email)) {
			out.print("1");
		}else {
			out.print("0");
		}
				
		out.close();
	}
	
}