当前位置：首页 → 问答吧 → jquery如何实现在jsp页面中的无刷新分页

jquery如何实现在jsp页面中的无刷新分页

时间：2010-04-17

来源：互联网

公司要求用jquery实现页面无刷新分页，外加增删改查操作。
我们采用的技术是jsp+JavaBean+Servlet，后台数据库为sqlserver 2000
现在是测试阶段，还没有正式应用到到项目中去。

由于本人之前没接触过jquery，所以在网上查找相关资料，想要一顿恶补，
但是在所找到的资料中php的例子居多，.net的也有，可关于jsp的则少之又少，
基本没有一个完整的demo可供参考，参照那些例子做出来的东西，
总是出现一些预料之外的问题，让我不知道如何解决。

现在很急，所以现在发帖请求大家帮助。

简单要求：
1、使用jsp/servlet实现都可以，但必须与数据库进行交互
2、不用使用太复杂的表，简单的一个表（users）就行

如果哪位大虾有这样的例子，可以发到我的邮箱:[email protected]
收到后，如何合适，立即结贴加分！！！

作者: gaobailing2050 发布时间: 2010-04-17

这个好像很难阿

作者: jackbeibei 发布时间: 2010-04-17

不应该是这样的吧！！！

作者: gaobailing2050 发布时间: 2010-04-18

你随便搜一下，这样的东西到处有。

作者: IBM_hoojo 发布时间: 2010-04-18

我不是搜过一两遍的事情，如果能在搜索中解决，我也不必发帖了，你说是这个道理吧

作者: gaobailing2050 发布时间: 2010-04-19

都好几天了，难道没有人用过这个？？

作者: gaobailing2050 发布时间: 2010-04-20

等待中

作者: liuyi1985_2008 发布时间: 2010-04-20

真替楼主郁闷。。
php，jsp也好。。都是一样。。

前台页面都是ajax向后台页面获取数据，前台页面获取到数据for生成html就行了。。

根本不需要管你后台是什么语言，什么数据库。按照样式显示数据就行了。。一般是json

作者: smildlzj 发布时间: 2010-04-23

分页有关的是是与 form 提交数据有关

无刷新的你就用 ajax 提交form 表单就行了

然后服务器端返回数据的的格式如：json格式的一系列数据

那么你就解析这个json 格式数据然后操作表格如Div中嵌套的tabl

jQuery Form Plugin

作者: wad12302 发布时间: 2010-04-23

引用 8 楼 wad12302 的回复:

分页有关的是是与 form 提交数据有关

无刷新的你就用 ajax 提交form 表单就行了

然后服务器端返回数据的的格式如：json格式的一系列数据

那么你就解析这个json 格式数据然后操作表格如Div中嵌套的tabl

jQuery Form Plugin

这个真能扯

其实就是一个webservice的概念，当然，webservice一般是返回xml，xml/json都可以。
也就是说，打个比方，你请求的是page.aspx?num=2
这就是第二页的一个页面请求，通过get的方式

而你需要的就是通过这个页面返回数据。明白了么？
第三页就是
page.aspx?num=3
第四页就是
page.aspx?num=4

至于数据呈现，既然ajax都拿到数据了，呈现也只是js的事情了

作者: ferock 发布时间: 2010-04-23

谢谢各位大大，继续潜水研究，成功后会把我的例子贴出来，以求再次指教

作者: gaobailing2050 发布时间: 2010-04-29

晕还真是不明白问题啊？？

“这个真能扯
”

人家问的不是分页而是无刷新进行分页，用的是jquery

看来是我想多了。路过大家继续

作者: wad12302 发布时间: 2010-04-29

这是我一个ajax提交form表单无刷新提交查询 jsp
你看着修改吧：
HTML code


<%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="gbk"%>
<%@include file="/common/common.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link href="style/oa.css" rel="stylesheet" type="text/css">
<!-- 
<script language="javascript" src="<c:url value='/script/jquery-1.3.2.js'/>"></script>
 -->
<script language="javascript" src="<c:url value='/style/jquery-1.4.2.js'/>"></script>
<script language="javascript" src="<c:url value='/script/json2.js'/>"></script>
<script language="javascript" src="<c:url value='/script/jquery.form.js'/>"></script>
<title>添加人员信息AjaxForm</title>

<script type="text/javascript">
//prepare the form when the DOM is ready 
$(document).ready(function() {

    var url = "jqueryjson.do?method=addPersonForm_2";    
    var options = { 
        beforeSubmit:  showRequest,  
        success:       showResponseJson,  
                 error:showResponseError,
        url:       url ,         
        type:      'post', 
        dataType:  'json' 
        //timeout:   3000 
    };  
    var options2 = { 
        beforeSubmit:  showRequest,  
        success:       showResponseJson,  
                 error:showResponseError,
        url:       url ,         
        type:      'post', 
        dataType:  'json' 
        //timeout:   3000 
    };  
    //$('#myForm').ajaxForm(options); 
    $("#btn1").click(function() {   
                alert("btn1 click");
                $("#myForm").ajaxSubmit(options2);
     });  
}); 

//pre-submit callback 
function showRequest(formData, jqForm, options) {
    $.each(formData,function (i, d) { 
        //d.value+"_"+d.name
        if("name"==d.name){
            alert("encode");
            formData[i].value = encodeURIComponent(formData[i].value);//
        }
        //alert(i+'_'+formData[i].value+"_"+formData[i].name);//可以通过这样 取得 key 和value  成功的
        //alert(i+'_'+formData[i].value+"_"+formData[i].name+"\n\n"+i+"_"+d.value+"_"+d.name);//可以通过这样 取得 key 和value  这个也是成功
        //alert(i+'_'+formData[i].value+"_"+formData[i].name+"\n\n"+i+"_"+d.value+"_"+d.name);//可以通过这样 取得 key 和value
        //formData[i].value = 'aaaaa_' + i;
        //encodeURIComponent
        //formData[i].value = encodeURIComponent(formData[i].value);  
        
    });
    return true; 
} 

 
function showResponseJson(responseText, statusText, xhr, $form)  {
       alert(responseText.name);
        $("#divId").html(responseText.name); 
} 

function showResponseError(responseText, statusText, xhr, $form)  {    
   alert('showResponseError status: ' + statusText + '\n\nresponseText: \n' + responseText.responseText); 
} 




function errorChange(XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
   // this; // 调用本次AJAX请求时传递的options参数
    alert("保存失败;"+XmlHttpRequest.responseText);
}
</script>


</head>
<body>
<center>
<%--
<form action="person.do?method=add" method="post" id="myForm">
 --%>
<form action="jqueryjson.do?method=addPersonForm_1" method="post" id="myForm">
<TABLE class="tableEdit" border="0" cellspacing="1" cellpadding="0" style="width:580px;">
    <TBODY>
        <TR>
            <!-- 这里是添加、编辑界面的标题 -->
            <td align="center" class="tdEditTitle">添加人员信息</TD>
        </TR>
        <TR>
            <td>
            <!-- 主输入域开始 -->

<table class="tableEdit" style="width:580px;" cellspacing="0" border="0" cellpadding="0">
    <tr>
        <td class="tdEditLabel" >所属机构</td>            
        <td class="tdEditContent"><input type="text" 
        id="orgNameId" disabled="disabled">
        <input type="hidden" name="orgId" id="orgIdId">
        <input type="button" value="选择" 
        onclick="openWin('org.do?select=true','selectOrgs',800,600,1);">
        </td>
        <td class="tdEditLabel" >姓名</td>            
        <td class="tdEditContent"><input type="text" name="name"></td>
    </tr>
    <tr>
        <td class="tdEditLabel" >性别</td>            
        <td class="tdEditContent"><input type="text" name="sex">
        </td>
        <td class="tdEditLabel" >年龄</td>            
        <td class="tdEditContent"><input type="text" name="age"></td>
    </tr>
    <tr>
        <td class="tdEditLabel" >电话</td>            
        <td class="tdEditContent"><input type="text" name="phone">
        </td>
        <td class="tdEditLabel" >地址</td>            
        <td class="tdEditContent"><input type="text" name="address"></td>
    </tr>
    <tr>
        <td class="tdEditLabel" >描述</td>            
        <td class="tdEditContent" colspan="3"><input type="text" name="description">
        </td>
    </tr>
</table>

            <!-- 主输入域结束 -->
            </td>
        </TR>
    </TBODY>
</TABLE>

<TABLE>
        <TR align="center">
            <TD colspan="3" bgcolor="#EFF3F7">
            <input type="submit" name="saveButton"
                class="MyButton" value="保存人员信息submit">
            <input type="button" name="btn1" id="btn1" 
                class="MyButton" value="保存人员信息btn"> 
                
            <input type="button" class="MyButton"
                value="关闭窗口" onclick="window.close()">
            </TD>
        </TR>
</TABLE>
</form>
<div id="divId">1111111111111111</div>
</center>
<a href=""></a>
</body>
</html>

服务器后台返回json格式数据：
String json = "{'suc':1, 'msg':'登录成功!','classs':'y2e128班','name':'队长说'}";

或者用工具jar

Java code


        Person pp = new Person();
        pp.setAddress("y2e128班");
        pp.setName("登录成功22222222");
        try{
        JSONObject jos = JSONObject.fromObject(pp);//最好以这种形式来生成
        
            System.out.println(jos.toString());
            response.getWriter().write(jos.toString());  
        }catch(Exception e){
            e.printStackTrace();
        }

只是例子没有怎么删减

作者: wad12302 发布时间: 2010-04-29

唯一缺憾就是 jquery 的 ajax 中文乱码！

如果是框架之类的编码采用utf -8 基本没问题

如果没使用框架之类的（我没试）

如果是gbk 嘿嘿有你头大的

做一个filter 专门过滤 jquery的ajax (网上有慢慢找)
或者
formData[i].value = encodeURIComponent(formData[i].value);//

然后
String uu = request.getParameter("name");
System.out.println("test_" + URLDecoder.decode(uu,"utf-8"));

作者: wad12302 发布时间: 2010-04-29

不说感谢，继续潜水，深入研究中。。。

作者: gaobailing2050 发布时间: 2010-04-30

引用 12 楼 wad12302 的回复:

这是我一个ajax提交form表单无刷新提交查询 jsp
你看着修改吧：
HTML code

<%@ page language="java" contentType="text/html; charset=gbk"
pageEncoding="gbk"%>
<%@include file="/common/common.jsp" %>

<!DOCTYPE html PU……

真是抽风，都用ajax，还用Form干嘛？活该你中文有问题

作者: ferock 发布时间: 2010-04-30

真郁闷，，
不能不说了！！

真是抽风，都用ajax，还用Form干嘛？活该你中文有问题

谁说ajax就不能用form 而且我用form得比你组织数据更方便更简洁

不理解jquery form 就不要这么说。

你用ajax 提交表达时候你是不是要自己参数

xxxxx?name=?&name1=?&name2=?&name3=?&name3=?&

如果有什么好的方法或者你用什么更好的方法提交查询条件的的数据请指教！！
如果你不觉得这样麻烦就可以

我使用 form
这是我一个ajax提交form表单
是一个jquery 插件可以 ajax 提交表单查询条件而不用自己手动一个一个去写
大家都知道ajax

但是都想怎么更简单的提交
以及多条件查询时候怎么更方便的提交表单吗？（我只是提出一个jquery的插件而已）

这里只探讨jquery的ajax 如果你使用其他的ajax框架那么是我的中文真的有问题

我英文不好，就不翻译了：
该插件的作者在介绍form.js时，说了这样的一句话：

Submitting a form with AJAX doesn't get any easier than this!

现在还要去补中文~~~ 我为中国义务教育做出了多大的牺牲。

作者: wad12302 发布时间: 2010-05-01

楼主，你完成那个小案例了吗？完成就发我一份，[email protected]
十分感谢你。我也是jquery新手。也需要这样的案例。麻烦发一下。
再次谢谢

作者: yanyanquan 发布时间: 2010-07-10

Ajax 呵呵的确是好东西、 - - 我只有浅入、实现一些登陆什么的还是可以的、
但是，。。。展现整个页面的数据- -、我用的更多的是Servlet的out.print();

作者: zsw6268722 发布时间: 2010-10-07