jquery的ajax(err)
load()方法
load()方法是jquery中最为简单和常用的ajax方法。
直接使用ajax技术的流程
1、创建xmlhttprequest对象
2、调用open函数("提交方式",url,true)
3、指定当xmlhttprequest对象的状态发送变化后,用哪个函数去处理
4、send()//如果提交的方式是post,就需要带数据,如果是get,则无需带上数据。
如果使用jquery,则变得非常简单
1、使用load向某个servlet发送请求get
核心代码:
说明:$("#one")表示id为one的一个jquery对象,这里也可以是任意的一个jquery对象。
url 表示提交给哪个资源(可以是servlet,jsp,action),null表示他是get方式提交
function(data,textStatus,xmlHttpReq)表示回调函数(当xmlHttprequest对象状态发送变化,则函数会自动调用)。
get提交也可以通过 url 传递数据。
使用load向某个servlet/jsp/action发送post请求
get方式
//"load.jsp" : 表示把请求发送给谁,相当于open("请求方式",url,true)中的url
//null:表示有没有数据发送给指定的url 特别说明,如果第二个参数是null,则该提交方式就是get
//如果第二个参数是,"username=shunping&passwd=123",则jquery框架会以post方式提交
//function(data,textStatus,xmlHttpReq)这个函数就是xmlHttpRequest对象的状态发送改变后,
//自动调用的函数。函数中 第一个参数是数据,第二个参数是文本的状态;第三个参数就是对象(xmlhttprequest)
$("#one").load("/hspjquery/MyServlet",null,function(data,textStatus,xmlHttpReq){
alert("服务器回送的数据是"+data);
});
post方式
//使用post方式提交数据
$("#one").load("hspjquery/MyServlet",
{"username":$("#username").val(),"pwd":$("#pwd").val()},
//json,java的原生态数据格式你
function(data,state,hsp){
alert("post方式服务器回送的数据是"+data+" textStatus="+hsp.status+" "+hsp);
}
);
详细代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> </head> <body>
<form action="" name="form1" id="form1">
用户名<input type="text" name="username" id="username" value="zhang"/><br/>
密 码<input type="text" id="pwd" name="pwd" value="9999"/><br/>
<input type="button" id="b1" value="登陆"/>
</form>
<div id="one"> </div>
</body>
<script type="text/javascript"> $("#b1").click(function(){ //"load.jsp" : 表示把请求发送给谁,相当于open("请求方式",url,true)中的url
//null:表示有没有数据发送给指定的url 特别说明,如果第二个参数是null,则该提交方式就是get
//如果第二个参数是,"username=shunping&passwd=123",则jquery框架会以post方式提交
//function(data,textStatus,xmlHttpReq)这个函数就是xmlHttpRequest对象的状态发送改变后,
//自动调用的函数。函数中 第一个参数是数据,第二个参数是文本的状态;第三个参数就是对象(xmlhttprequest) /* $("#one").load("/hspjquery/MyServlet",null,function(data,textStatus,xmlHttpReq){
alert("服务器回送的数据是"+data);
}); */ //使用post方式提交数据
$("#one").load("hspjquery/MyServlet",
{"username":$("#username").val(),"pwd":$("#pwd").val()},
//json,java的原生态数据格式你
function(data,state,hsp){
alert("post方式服务器回送的数据是"+data+" textStatus="+hsp.status+" "+hsp);
}
);
}); </script>
</html>
MyServlet.java
package cn.hsp.servlet; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class MyServlet extends HttpServlet{
public void doGet (HttpServletRequest request, HttpServletResponse response)
throws ServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html:charset=utf-8");
response.setHeader("Cache-Control", "no-cache"); PrintWriter out=response.getWriter();
String username=request.getParameter("username");
System.out.println("浏览器发送的数据是"+username);
String pwd=request.getParameter("pwd");
System.out.println("ok");
System.out.println("密码是:"+pwd); //给浏览器
out.write("ok");
out.close(); System.out.println("ok"); } public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException,IOException{ }
}
上述代码没有运行成功
报错如下所示:
项目:小而精。(精)。
jquery的ajax(err)的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- Asp.net中JQuery、ajax调用后台方法总结
通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...
- jquery通过AJAX从后台获取信息并显示在表格上的类
前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...
- jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
- 在asp.net中使JQuery的Ajax用总结
自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方 ...
- 类型:Jquery;问题:jquery调用后台带参数方法;结果:利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod] 命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- Jquery使用ajax与Flask后端进行数据交互
最近做项目碰到一个坑,jquery使用ajax向flask传输数据的时候,在后端采用request.data无论如何都获取不到数据,代码如下: 前端: <script> function ...
随机推荐
- windows 和 linux 上 循环读取文件名称的区别和方法
function showGetFileName($type){ $url="/opt/mobile_system/gscdn"; //另一台服务器映射到linux过来的路径. # ...
- 配置Nginx与tomcat负责均衡集群,
今天主要说说,nginx如何配置tomcat集群,首先我们先介绍一下各个软件: 一: 1.Nginx介绍: 下载地址:http://nginx.org/en/download.html nginx这个 ...
- Lumen开发:lumen源码解读之初始化(1)——app实例
版权声明:本文为博主原创文章,未经博主允许不得转载. 有些注释来着原文的百度翻译,可以有些难理解或者奇怪,我后面会根据自己的理解做调整的哈!!!不喜勿喷,层主英语不过关... 先来看看入口文件publ ...
- linux下nginx php配置redis
之前一直遇到,Module compiled with module API=20090626这个坑问题!!! NOTICE: PHP message: PHP Warning: PHP Star ...
- META-INF中的INF的意思
1 META是元的意思,比如meta data,元数据. 2 什么是meta data 元数据就是描述其它数据的数据,比如web page中的meta data,包括关键字,对该网页的描述等等. 3 ...
- Zookeeper Curator 事件监听 - 秒懂
目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...
- linux c编程:进程控制(四)进程关系
每一个进程除了有一个进程ID外,还属于一个进程组. 进程组是一个或多个进程的集合,通常情况下,他们是在同一作业中结合起来的,同一进程组的个进程接受来自同一终端的各种信号. 每一个进程组有一个唯一的进 ...
- GeekforGeeks Trie - 键树简单介绍 - 构造 插入 和 搜索
版权声明:本文作者靖心,靖空间地址:http://blog.csdn.net/kenden23/,未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...
- ALV调用的几个函数
转 ALV的调用主要由以下几个标准函数实现,所有函数的输入输出参数必须大写,否则系统会出现异常中止,相关函数如下: 1)REUSE_ALV_FIENDCATALOG_MERGE:根据内表结构返回FI ...
- full_case parallel_case学习心得
一般情况下,DC把case语句综合成选择器电路,但也可能把case语句综合成优先权译码电路.有时,优先权译码电路是不必要的,这是可以使用“// synopsys parallel_case”引导语句强 ...