【速成之路】网页编程必会的Ajax——jQuery实现Ajax（二）

本文链接：https://blog.csdn.net/m0_61684063/article/details/124485204

🎉个人主页：这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
【速成之路】SQLserver

🔓本期专栏：【速成之路】Ajax

jQuery实现Ajax

$.get()方法与 $.post()方法
- 1.$.get()方法
- 2.$.post()方法

$.get()方法与 $.post()方法

浏览器的客户端有两种方法向服务器端进行请求，分别是GET和POST。其中，GET方法是从指定的资源请求数据，基本上用于从服务器获得（取回）数据；POST方法向指定的资源提交要处理的数据，也可用于从服务器获取数据。POST方法不会缓存数据，并且常用于连同请求一起发送数据。

在这里插入图片描述

1.$.get()方法

$.get()方法是使用HTTPGET请求从服务器加载数据，其语法格式如下所示：

$. get(url, callback);

其中，url是设置资源请求的路径；callback是资源请求成功后执行的函数名。例如请求test. php网页，忽略返回值，调用语句如下所示：

$. get("test. php");

例如请求test.php网页，显示返回值，调用语句如下所示：

$.get(
  "test.php",
   function(data){
     alert("返回值是："+data);
   }
);

2.$.post()方法

$.post()方法通过HTTPPOST请求从服务器载入数据，其语法格式如下所示：

$.post(url, data, callback);

其中，url是设置资源请求的路径；data是在进行资源请求的同时向服务器端发送的数据；callback是资源请求成功后所执行的函数名。

例1在页面上仅显示一个按钮，单击该按钮之后，使用$.post()方法请求服务器网页，并把返回的数据显示到指定的<div>中，其在浏览器中的显示结果如图1和图2所示。

【例1】

<!DOCTYPE html>
  <html>
  <head>
  <title>example1.html</title>
  <meta http-equiv="content=type" content="text/html;charset=UTF-8">
  <script type="text/ javascript "src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
     $(function(){
       $("button").click(function(){
        $.post("example1-server.jsp",{
          name:"Web编程基础",
          url:" http://www.whpu.edu.cn "
        },
        function(data, status){
          $("#display").html("数据:<br>"+data+"<br>状态: <br>&nbsp;&nbsp;%nbsp;"+status);
		  });
      });
	});
   </script>
   <head>
 <body>
      <div id="display"></div>
      <button>AjaxPOST请求</button>
 </body>
</html>

例1中$.post()的第一个参数是请求的URL地址，本例是example1-server. jsp；第二个参数设置向服务器端发送的数据(name和url)，example1-server-jsp中的JSP脚本读取这些参数，并对其进行处理，最后返回结果；第三个参数是回调函数，回调参数的第一个参数存有被请求页面的内容，第二个参数存有请求的状态。
例1中服务器端源代码example1-server. jsp如下：

<%@ page language="java" import="java.util.*"  pageEncoding="utf−8"%>
<%
String webName=(String)request.getParameter("name");
String url=(String)request.getParameter("url");
out.print("&nbsp;&nbsp;&nbsp;网站名:"+webName);
out.print("<br>&nbsp;&nbsp;&nbsp;网址:"+url);
%>

在这里插入图片描述