• 技术文章 >web前端 >js教程

    jquery ajax 如何向jsp提交表单数据_jquery

    2016-05-16 15:43:28原创896
    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者,当然我也要 “随波逐流”一把,不然饭碗不保啊!

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练“打字水平”的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

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

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

    本文使用的是 jquery-1.3.2.min.js开发工具。

    新建两个页面:

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

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

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

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

    show.jsp页面的重点部分:

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

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

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

    4、增加一个按钮,用来调用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中
    
    }
    
    });
    
    }

    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);
    
    %>

    运行效果如下:

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

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

    jquery ajax提交表单从action传值到jsp

    jsp页面:

    代码如下:

    var clientTel = $("#clientTel").val(); 
    var activityId = $("#activityId").val(); 
    $.ajax({ 
    type : "post",//发送方式 
    url : "/arweb/reserve/saveCode.action",// 路径 
    data : "clientTel="+clientTel+"&activityId="+activityId , 
    success: function(text){$("#randomCode").val(text);}, 
    error: function(text) {alert("对不起,用户ID不存在,请输入正确的用户ID");} 
    }); 

    acion类:

    代码如下:

    HttpServletResponse res = ServletActionContext.getResponse(); 
    res.reset(); 
    res.setContentType("text/html;charset=utf-8"); 
    PrintWriter pw = res.getWriter(); 
    pw.print(random); 
    pw.flush(); 
    pw.close(); 

    pw.print(random);这里的random就是action要向jsp传的值,在jsp中,success: function(text)这里的text就是接收从action传过来的值。

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例_jquery 下一篇:jQuery实现向下滑出的平滑下拉菜单效果_jquery
    大前端线上培训班

    相关文章推荐

    • javascript暂停功能如何实现• javascript如何求图形的面积• javascript object怎么转json• javascript怎么设置字体大小• javascript如何改变HTML内容

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网