你的位置:首页 > Java教程

[Java教程]Ajax在jQuery中的应用 (4)向jsp提交表单数据


ajax技术带给我们的是良好的用户体验,同时,使用jquery可以简化开发,提高工作效率。

下面就介绍一下大致的开发步骤。





工具/原料

  • 本文中使用的是 jquery-1.3.2.min.js




方法/步骤

  1. 新建两个页面:

    1、show.jsp:调用ajax,将表单中的数据发送给ajax.jsp页面。

    2、ajax.jsp:获取show.jsp页面传递的表单数据,并返回结果。

    两个页面的编码格式要设置为GBK:

    <%@ page contentType="text/html;charset=GBK"%>


  2. show.jsp页面的重点部分:

    1、添加对 jquery-1.3.2.min.js 的引用:

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    2、设置表单的id,在调用ajax的方法时要用到。

    <form id="ajaxFrm" >

    3、设置一个div,用于显示ajax.jsp页面返回的结果

    <div id="ajaxDiv"></div>

    4、增加一个按钮,用来调用ajax

    <input type="button" onClick="doFind();" value="调用一下ajax" >

    5、增加调用ajax的函数:

    function doFind(){

    $.ajax({

    cache: false,

    type: "POST",

    url:"ajax.jsp", //把表单数据发送到ajax.jsp

    data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据

    async: false,

    error: function(request) {

    alert("发送请求失败!");

    },

    success: function(data) {

    $("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中

    }

    });

    }


  3. ajax.jsp页面的源代码:

    <%@ page contentType="text/html;charset=GBK"%>

    <%

    String userName = request.getParameter("UserName");

    if(userName!=null){

    userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解决乱码的问题

    }

    String returnString = "";

    returnString="你好," + userName;

    out.print(returnString);

    %>


  4. 运行效果如下:


    Jquery技巧:使用ajax技术提交表单数据
    Jquery技巧:使用ajax技术提交表单数据