jQuer实现Ajax的方法

1.$.get()方法和$.post()方法（所有的这些方法都是在jsp或者是html页面上）

.$.get()语法  

1. $.get(url[,data][,success][,dataType]);        

$.get()方法常用参数

url	String	必选，规定将请求发送到哪个URL
data	PlainObject或String	可选，规定连同请求发送到服务器的数据
success	Function(PlainObject data,String textStatus,jqSHR jqxhr)	可选，请求成功后调用的函数 参数 data：可选，服务器返回的结果数据 参数textStatus：可选，描述请求状态的字符串 参数jqxhr：可选，jqXHR是XMLHttpRequest的超集如果指定了dataType，则必须提供此参数。如果没有事情需要处理，可以使用null或jQuery.noop()空方法作占位符
dataType	String	可选，预期服务器返回的数据类型，可用类型有XML、HTML、SCRIPT、JSON、JSONP、Text

 

//所有的这些方法都是在jsp或者是html页面上
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
   function valss(){
       var name=$("#email").val();
       if(name==null||name.trim()==""){
       $("#div").html("邮箱不能为空");
       }else{
           $.get("/ch10/servlet","name="+name,callBack);//此区域$.get()是重点
           function callBack(data){
                      if(data=="true"){
                          $("#div").html("该邮箱已经使用");
                      }else{
                          $("#div").html("该邮箱可以使用");
                      }
           };
       };
   };

 2.$.post()方法

 $.post()语法

1. $.post(url[,data][,success][,dataType]);    

                                                                                  $.post()方法常用参数

url	String	必选，规定将请求发送到哪个URL
data	PlainObject或String	可选，规定连同请求发送到服务器的数据
success	Function(PlainObject data,String textStatus,jqSHR jqxhr)	可选，请求成功后调用的函数 参数 data：可选，服务器返回的结果数据 参数textStatus：可选，描述请求状态的字符串 参数jqxhr：可选，jqXHR是XMLHttpRequest的超集如果指定了dataType，则必须提供此参数。如果没有事情需要处理，可以使用null或jQuery.noop()空方法作占位符
dataType	String	可选，预期服务器返回的数据类型，可用类型有XML、HTML、SCRIPT、JSON、JSONP、Text

 

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
   function valss(){
       var name=$("#email").val();
       if(name==null||name.trim()==""){
       $("#div").html("邮箱不能为空");
       }else{
         $.post("/ch10/servlet","name="+name,callBack);//此方法$.post()方法最为重要
                    function callBack(data){
                      if(data=="true"){
                          $("#div").html("该邮箱已经使用");
                      }else{
                          $("#div").html("该邮箱可以使用");
                      }
           }
       }
   }
</script>

3.$.getJSON()方法 

 $.getJSON()语法

1.  $.getJSON(url[,data][,success]);

 

$.getJSON()方法常用参数

url	String	必选，规定将请求发送到哪个URL
data	PlainObject或String	可选，规定连同请求发送到服务器的数据
success	Function(PlainObject data,String textStatus,jqSHR jqxhr)	可选，请求成功后调用的函数 参数 data：可选，服务器返回的结果数据 参数textStatus：可选，描述请求状态的字符串 参数jqxhr：可选，jqXHR是XMLHttpRequest的超集如果指定了dataType，则必须提供此参数。如果没有事情需要处理，可以使用null或jQuery.noop()空方法作占位符
dataType	String	可选，预期服务器返回的数据类型，可用类型有XML、HTML、SCRIPT、JSON、JSONP、Text

$.getJSON("/news/util/topics","opr=list",loadNews);

4.使用Ajax返回HTML内容（创建一个jsp页面使其生成HTML标签，再返回给真正的主页面）

 

//一个(.js)文件
 $(document).ready(function() {
        function initNews() {
            var $newsList = $("#opt_area> .classlist").empty();                                      
            //使用返回html格式来加载ul li
            $.ajax({
                "url" : "../util/topics",// 要提交的URL路径
                "type" : "GET",// 提交的方式
                "data" : "opr=list",// 要发送到服务器的数据
                "dataType" : "html",// 指定返回的数据格式
                "success" : loadNews
            });
            function loadNews (data) {// 响应成功后要执行的代码
            	 $newsList.html(data);
            
                }
        }
        initNews();
    });

 

1.  另一个要生成的html的标签页面  

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 <c:forEach items="${requestScope.list}" var="topic">
      <li> &#160;&#160;&#160;&#160; ${topic.tname} &#160;&#160;&#160;&#160; <a href='../newspages/topic_modify.jsp?tid=${topic.tid}&tname=${topic.tname}'>修改</a> &#160;&#160;&#160;&#160; <a href='../util/topics?opr=del&tid=${topic.tid}'>删除</a> </li>
     </c:forEach>

5.使用.load()方法 

 .load()语法

1. $(selector).load(url[,data][,complete]);

.load()方法常用参数

url	String	必选，规定将请求发送到哪个URL
data	PlainObject或String	可选，规定连同请求发送到服务器的数据
complete	Function(String responseText,String textStatus,jqXHR jqxhr)	可选，对每个匹配的元素设置完内容都会触发该函数 参数 responseText：可选，服务器返回的结果数据 参数tetxtStatus：可选，描述请求状态的字符串 参数jqxhr：可选，jqXHR是XMLHttpRequest的超集

 $(document).ready(function() {
        function initNews() {
            var $newsList = $("#opt_area> .classlist").empty();
            $($newsList).load("../util/topics","opr=list");//路径、参数   
            
        }
        initNews();
    });