jQuery AJAX 实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26250427/article/details/78156773

load()方法

是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。

它的结构为：

load(url [,data][,callback])1

其中:url是指要导入文件的地址。
data：可选参数；因为load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数

在load()方法中，无论Ajax请求是否成功，只要当请求完成(complete)后，回调函数(callback)就被触发。

二，$.post(url,[data],[callback],[type])

实现POST方法

说明：
url (String) 发送请求的URL地址.
data (Map)(可选参数) 要发送给服务器的数据，以 Key/value 的键值对形式表示
callback (Callback) (可选参数) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)
type (String) (可选参数) 请求数据的类型，xml,text,json等

这个函数同样是jQuery提供的一个简便函数，跟$.get()参数差不多，多了一个type参数，type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的。

Login.jsp

<%@ 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">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/login/login01.js"></script>

<!--

在jsp里直接写login01.js的代码,可以识别${pageContext.request.contextPath}自动获取工程路径的方法,

在js里就不识别这个代码,手写??????怎么让他识别呢?????

-->

<!--

</script>
-->

<title>Insert title here</title>
</head>
<body>

<h1>注册页面</h1>

用户名<input type="text" id="username" name="username"><span id="s1"></span></br>

</body>
</html>

login01.js

$(function(){
           $("#username").blur(function(){
               //获取文本的值
               var username = $(this).val();
               //演示load方法
               //$("#s1").load("/web_day19/ServletDemo3", {"username":username});
               //演示get/post方法

                //无法直接使用

//${pageContext.request.contextPath}自动获取工程路径的方法,

                $.get("/Day19/LoginServlet", {"username":username}, function(data){
                   if(data == 0){
                    $("#s1").html("<font color='green'>用户名可以使用</font>");

//这个是禁用表单提交属性

                     //$("#regBut").attr("disabled", false);
                   }else if(data ==1){
                       $("#s1").html("<font color='red'>用户名已经存在</font>");
                       //$("#regBut").attr("disabled", true);
                   }
               });
           });
       });