jQuery提交表单, 无刷新

来源：互联网发布：centos php伪静态编辑：程序博客网时间：2024/05/01 20:38

1.在myEclipse中新建一个web project, 名称:jqueryDemo

2.在index.jsp页面, 输入内容如下:

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<html>
    <head>
        <title>登录</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //为id为btnSubmit的按钮制定click事件
                $("#btnSubmit").click(function(){
                    //指定提交到什么页面
                    $.get("doLogin.jsp",{
                        name:$("#name").val(),    //得到姓名
                        pwd:$("#pwd").val()        //得到密码
                    },function(data,textStatus){//data:页面执行完的返回数据, textStatus:请求状态
                        //本页面中的id为resText的元素的html中的内容为返回的数据
                        $("#resText").html(data);
                    });
                })
            })
        </script>
    </head>
    <body>
        <form action="#" name="myform">
            姓名:<input type="text" id="name" /><br />
            密码:<input type="text" id="pwd" /><br />
            <input type="button" id="btnSubmit" value="提交" />
        </form>
        <div id="resText"></div>
    </body>
</html>

3. 另一页面doLogin.jsp内容如下:

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
    String name=request.getParameter("name");
    String pwd=request.getParameter("pwd");
    System.out.print(name+pwd);
    if("leaf".equals(name) && "leaf".equals(pwd)){
        out.print("登录成功!");
    }else{
        out.print("登录失败!");
    }
%>

很简单对吗? 是的, 它比其它方法似乎更简单一些.

而且, 它的提交可以到xxx.do?op=xxx, 这样就可以连接数据库取数据来操作了, 抛砖引玉吧.