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/>

      密 &nbsp;&nbsp;码<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）的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...

  3. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  4. Asp.net中JQuery、ajax调用后台方法总结

    通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...

  5. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

  6. jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中

    不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

  7. 在asp.net中使JQuery的Ajax用总结

    自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方 ...

  8. 类型：Jquery；问题：jquery调用后台带参数方法；结果：利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

  9. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  10. Jquery使用ajax与Flask后端进行数据交互

    最近做项目碰到一个坑,jquery使用ajax向flask传输数据的时候,在后端采用request.data无论如何都获取不到数据,代码如下: 前端: <script> function ...

随机推荐

  1. 实现Nullable 可空类型

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace demo ...

  2. The best way to predict the future is to invent it，预测未来最好的方法是创造它！

    The best way to predict the future is to invent it,预测未来最好的方法是创造它! ——Smalltalk发明人Alan Kay “预测未来的最好方法, ...

  3. 50 years of Computer Architecture: From the Mainframe CPU to the Domain-Specific TPU and the Open RISC-V Instruction Set

    1.1960年代(大型机) IBM发明了具有二进制兼容性的ISA——System/360,可以兼容一系列的8到64位的硬件产品,而不必更换操作系统.这是通过微编程实现的,每个计算机模型都有各自的ISA ...

  4. Linux 在不重启的情况下识别新挂载的磁盘

    在使用 Linux 时,有时候会因为初始时磁盘空间分配估计不足,使用中需要将挂载点扩容的情况,这就需要我们挂载新的磁盘.但是如果我们在 Linux 运行过程中挂载磁盘, Linux 又不能在不重启的情 ...

  5. linux卸载一个源码包安装的软件的流程

    完全卸载memcached的方法(CentOS) 我的大内存vps(centos系统)曾经安装过memcached,想给论坛提速,实际上不但没有明显效果,反倒耗费内存,看着碍眼,于是想卸载,于是网上各 ...

  6. iOS开发---业务逻辑

    iOS开发---业务逻辑   1. 业务逻辑 iOS的app开发的最终目的是要让用户使用, 用户使用app完成自己的事就是业务逻辑, 业务逻辑的是最显眼开发工作.但是业务逻辑对于开发任务来说, 只是露 ...

  7. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

  8. 重载(overload)、覆盖(override)和隐藏(hide)

    写正题之前,先给出几个关键字的中英文对照,重载(overload),覆盖(override),隐藏(hide).在早期的C++书籍中,可能翻译的人不熟悉专业用语(也不能怪他们,他们不是搞计算机编程的, ...

  9. Eureka集群搭建

    服务注册.发现是微服务架构的关键原理之一,由于微服务架构是由一系列职责单一的细粒度服务构成的网状结构,服务之间通过轻量机制进行通信,这就必然引入一个服务注册发现的问题,也就是说服务提供方要注册报告服务 ...

  10. 电路分析二-------基尔霍夫定律KCL和KVL

    1.先了解几个名词 (1)支路----一个二端原件视为一条支路--图中6个二端原件所以有6条支路. (2)结点----两条或以上的支路连接的点. d,e可以看做一个结点. (3).回路----- (4 ...