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

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


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


在这里插入图片描述

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

  浏览器的客户端有两种方法向服务器端进行请求,分别是GETPOST。其中,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);
%>

在这里插入图片描述

  • 45
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 36
    评论
评论 36
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这个昵称我想了20分钟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值