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. Android使用SQLite数据库

    Android中得数据库 加载驱动 连接数据库 操作数据库 使用API方式进行查询 事物操作 SQLite中的批处理,加快事物执行速度的.

  2. python带setup.py的包的安装

    如psutil-4.2.0.tar.gz tar -zxvf psutil-4.2.0.tar.gz psutil-4.2.0 cd psutil-4.2.0 sudo python setup.py ...

  3. java getResourcesAsStream()如何获取WEB-INF下的文件流

    getResourcesAsStream()来读取.properties文件,但是getResourcesAsStream()仅在java项目时能获取根目录的文件: 在web项目中,getResour ...

  4. 为什么是kafka(二)

    回答几个网友提出的问题,不清楚的能够看上一篇内容. 1.  kafka的删除策略应该怎么配置?为了提升性能.我是不是应该1小时删除一次消费过的数据. 全然能够依据磁盘大小配置.仅仅要磁盘足够用,全然不 ...

  5. solr6.5的分词

    1.配置solr6.5自带中文分词.复制/usr/local/solr/contrib/analysis-extras/lucene-libs/lucene-analyzers-smartcn-6.5 ...

  6. MATLAB循环结构：break+continue+嵌套

    break语句:终止当前循环,继续执行循环语句的下一语句: continue语句:跳过循环体的后面语句,开始下一个循环: 例:求[100,200]之间第一个能被21整除的整数 :200 %循环语句 ) ...

  7. sharding-jdbc从入门到出门(03)

    经过端午节这2天对 sharding-jdbc一直怀揣成梦想的去学习,还是有一些没有解决的问题: 上一张图:

  8. zookeeper snowflake 实战

    目录 写在前面 1.1.1. 集群节点的命名服务 1.1.2. snowflake 的ID算法改造 SnowFlake算法的优点: SnowFlake算法的缺点: 写在最后 疯狂创客圈 亿级流量 高并 ...

  9. 【python】-- 类的实例化过程、特征、共有属性和私有属性

    实例化过程 1.类的定义和语法 class dog(object): #用class定义类 "dog class" #对类的说明 def __init__(self,name): ...

  10. 监听并保存ssh账号密码

    有时候渗透搞下一台服务器的权限,想通过此服务器抓取其他服务器的ssh密码.就可以用以下方法,如果管理员通过这台服务器作为跳板登录其他服务器,密码就会记录下来. alias ssh='strace -o ...