javaweb:jquery中ajax的应用

打印 上一主题 下一主题

主题 861|帖子 861|积分 2583

1.什么是jquery,什么是ajax
jquery是一套开放性源代码的JavaScript函数库,简化了DOM文件的操作,让我们轻松选取对象,并以简洁的程序完成想要的效果。此外jquery也强化了异步传输(ajax)的功能,我们在这里就是要用到它的这一项功能。
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
2.引入jquery
下载链接:https://jquery.com/。

 

 
右键下载链接,将链接另存为,这样将会得到一个js文件,将这个js文件引入到自己的项目中。
3.ajax的应用
这里我们只讲述jquery中的ajax的四个属性
url:规定发送请求的 URL。默认是当前页面。
type:规定请求的类型(GET 或 POST),默认是get。
data:规定要发送到服务器的数据,并能接收服务器返回的信息。
success:规定请求成功时运行的函数。
下面我们放源码:
login.jsp
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <html lang="en">
  4. <html>
  5. <head>
  6. <title>登录</title>
  7. <meta charset="utf-8" />
  8. <meta name="viewport"
  9.     content="width=device-width, initial-scale=1, user-scalable=no" />
  10. <link rel="stylesheet" href="assets/css/login_main.css" />
  11. </head>
  12. <body class="is-preload">
  13.    
  14.    
  15.         <h2 class="major">登录</h2>
  16.         <span style="color: white;" id="loginmessage"></span><br>
  17.         <form method="post">
  18.             
  19.                
  20.                     <label for="username">账号</label> <input type="text" id="username1"
  21.                         placeholder="手机号/邮箱" />
  22.                
  23.                
  24.                     <label for="password">密码</label> <input type="password"
  25.                         id="password1" placeholder="请输入密码" />
  26.                
  27.             
  28.             <ul class="actions">
  29.                 <li><input type="button" value="登录" class="primary"
  30.                     onclick="clicklogin()" /></li>
  31.                 <li><input type="reset" value="重置" /></li>
  32.             </ul>
  33.             还没有账号,点这里<a target="_blank" href="https://www.cnblogs.com/SIGNUP.jsp">进行注册</a>
  34.         </form>
  35.    
  36.    
  37.    
  38.    
  39.    
  40.    
  41.    
  42.    
  43. </body>
  44. </html>
复制代码
上面代码中用的$.post({})就已经规定了用post的方法进行请求,无需再对type属性进行规定;若是使用$ajax({}),则默认是get方法进行请求。
 
(本文仅作个人学习记录用,如有纰漏,敬请指正)
 

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

勿忘初心做自己

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表