jq 异步调用一个html,JavaScript系列：ajax异步加载jqgrid

ajax简介

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 1

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页页面。

jqgrid简介

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。

jqgrid的重要选项

url ：jqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以使XML也可以是Json。

datatype ：这个参数用于设定将要得到的数据类型。类型包括：json 、xml、xmlstring、local、javascript、function。

mtype : 定义使用哪种方法发起请求，GET或者POST。

height ：Grid的高度，可以接受数字、%值、auto，默认值为150。

width ：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。

shrinkToFit ：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。

autowidth ：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。

pager ：定义页码控制条Page Bar，在上面的例子中是用一个div(

sortname ：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端。

viewrecords ：设置是否在Pager Bar显示所有记录的总数。

caption ：设置Grid表格的标题，如果未设置，则标题区域不显示。

rowNum ：用于设置Grid中一次显示的行数，默认值为20。正是这个选项将参数rows(prmNames中设置的)通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定，则Grid也只显示rowNum设定的行数。

rowList ：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。

colNames ：字符串数组，用于指定各列的题头文本，与列的顺序是对应的。

colModel ：最重要的数组之一，用于设定各列的参数。

prmNames ：这是一个数组，用于设置jqGrid将要向Server传递的参数名称。

jsonReader ：这又是一个数组，用来设定如何解析从Server端发回来的json数据。

主要API接口getGridParam、setGridParam

getGridParam方法：

getGridParam("url")： 获取当前的AJAX的URL

getGridParam("sortname")：排序的字段

getGridParam("sortorder")：排序的顺序

getGridParam("selrow")：得到选中行的ID

getGridParam("page")：当前的页数

getGridParam("rowNum")：当前有多少行

getGridParam("datatype")：得到当前的datatype

getGridParam("records")：得到总记录数

getGridParam("selarrrow")：可以多选时，返回选中行的ID

setGridParam方法：

setGridParam({url:newvalue})：可以设置一个grid的ajax url，可配合trigger("reloadGrid")使用

setGridParam({sortname:newvalue})：设置排序的字段

setGridParam({sortorder:newvalue})：设置排序的顺序asc or desc

setGridParam({page:newvalue})：设置翻到第几页

setGridParam({rowNum:newvalue})：设置当前每页显示的行数

setGridParam({datatype:newvalue})：设置新的datatype(xml,json)

关于jqgrid的API还有很多，暂时不一一介绍了，本文主要介绍jqgrid1最基本的表格初始化阶段，，注：本文也包括了简单的用户登录和注册功能！

代码实例

jsp界面

系统 用户管理

系统>用户管理

用户管理

基本信息

用户名：

级别：

系统管理员

系统操作员

普通操作员

新密码：

确认新密码：

增加/修改

删除

用户列表

退出

保存

jqgrid插件$(document).ready(function () {

$("#gridTable").jqGrid({

colNames:['用户名','级别', '密码'],

colModel:[

{

name:'username',

index:'username',

width: 120,

},{

name:'grade',

index:'grade',

width: 100,

formatter : function(cellvalue,options,rowObject){

var str=""

if(cellvalue=="0"){

str="系统管理员";

}else if(cellvalue=="1"){

str="系统操作员";

}else {

str="普通操作员";

}

return str

},

},{

name:'password',

index:'password',

width: 120,

},

],

viewrecords: true,

width: 995,

height: 395,

rowNum: 20,

datatype: 'text',

pager: "#gridPager",

});

jf_initJqgrid();

function jf_initJqgrid() {

$.ajax({

url:"UserServlet",

async:true, //是否为异步请求

cache:false, //是否缓存结果

type:"GET",

dataType:"json",

success : function(data){

for(var i=0;i<=data.length;i++){

$("#gridTable").jqGrid('addRowData',i+1,data[i]);

}

}

})

}

$('[id^=jqgh_gridTable_]').css("height","20px");

});

servlet层package com.test.servlet;

import com.test.entity.User;

import com.test.service.UserService;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

public class UserServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {

response.setContentType("text/html");

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

String username = request.getParameter("username");

int grade = Integer.parseInt(request.getParameter("grade"));

String password = request.getParameter("password");

String password_affirm = request.getParameter("password_affirm");

String button = request.getParameter("button");

User u = new User();

u.setUsername(username);

u.setGrade(grade);

u.setPassword(password);

UserService service = new UserService();

if (button.equals("add")) {

int result = service.regist(u);

if (username != "" && password != "" && password.equals(password_affirm)) {

System.out.println(result);

if (result == 0) {

response.sendRedirect(request.getContextPath() + "html/regist/regist_success.jsp");

} else if (result == 1) {

response.sendRedirect(request.getContextPath() + "html/regist/login_success.jsp");

} else {

response.sendRedirect(request.getContextPath() + "html/regist/regist_fail.jsp");

}

} else {

response.sendRedirect(request.getContextPath() + "html/regist/regist_fail.jsp");

}

} else if (button.equals("delete")) {

if (username != "" && password != "" && password.equals(password_affirm)) {

service.deleteUser(username);

response.sendRedirect(request.getContextPath() + "html/regist/delete_success.jsp");

}else {

response.sendRedirect(request.getContextPath() + "html/regist/delete_fail.jsp");

}

}

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {

response.setContentType("text/html");

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

UserService service = new UserService();

String list = service.selectUser();

response.getWriter().print(list);

}

}

service层package com.test.service;

import com.test.dao.UserDao;

import com.test.entity.User;

public class UserService {

public int regist(User user){

UserDao dao= new UserDao();

int result = dao.insert(user);

return result;

}

public void deleteUser(String username){

UserDao userDao = new UserDao();

userDao.deleteUser(username);

}

public String selectUser(){

UserDao userDao = new UserDao();

String data = userDao.selectUser();

return data;

}

}

dao层package com.test.dao;

import com.test.entity.User;

import com.test.util.ConnectionFactory;

public class UserDao {

public int insert(User user){

int flag = 3;

String username = user.getUsername();

int grade = user.getGrade();

String password = user.getPassword();

try {

String sql_exist = String.format(

"select 1 from kj_user where username='%s'and grade = %s and password='%s'",

username,grade,password

);

String sql_regist = String.format(

"select 1 from kj_user where username = '%s'",

username

);

String res = ConnectionFactory.queryNoPage(sql_exist);

String regist = ConnectionFactory.queryNoPage(sql_regist);

if(res.indexOf("1") == -1){

System.out.println("登录失败");

if (regist.indexOf("1") == -1){

System.out.println("用户未注册，请注册！");

String sql = String.format(

"insert into kj_user(username,grade,password) select '%s',%s,'%s' from dual",

username,grade,password

);

System.out.println(sql);

ConnectionFactory.executeSQL(sql);

flag = 1;

}else{

System.out.println("请换不同ID注册！");

flag = 2;

}

}else {

System.out.println("登录成功");

flag = 0;

}

} catch (Exception e){

e.printStackTrace();

}

return flag;

}

public void deleteUser(String username){

String sql = String.format(

"delete from kj_user where username = '%s'",username

);

ConnectionFactory.executeSQL(sql);

}

public String selectUser(){

String sql = "select username,grade,password from kj_user";

String data = ConnectionFactory.queryData(sql);

return data;

}

}

实体类层package com.test.entity;

public class User {

private String username;

private int grade;

private String password;

public User() {

}

public User(String username, int grade, String password) {

this.username = username;

this.grade = grade;

this.password = password;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public int getGrade() {

return grade;

}

public void setGrade(int grade) {

this.grade = grade;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

}

连接池package com.test.util;

import java.sql.*;

public class ConnectionFactory {

private static String USERNAMR = "mine";

private static String PASSWORD = "mine";

private static String DRVIER = "oracle.jdbc.OracleDriver";

private static String URL = "jdbc:oracle:thin:@192.168.100.103:1521:orcl";

private static Connection conn = null;

public static Connection getConnection(){

try {

Class.forName(DRVIER);

conn = DriverManager.getConnection(URL, USERNAMR, PASSWORD);

System.out.println("成功连接数据库");

} catch (ClassNotFoundException e) {

throw new RuntimeException("class not find !", e);

} catch (SQLException e) {

throw new RuntimeException("get connection error!", e);

}

return conn;

}

public static void executeSQL(String sql) {

Statement stat = null;

try {

conn = getConnection();

stat = conn.createStatement();

} catch (Exception e) {

e.printStackTrace();

return;

}

try {

stat.execute(sql);

} catch (Exception e) {

e.printStackTrace();

return;

}

try {

if (stat != null) stat.close();

if (conn != null) conn.close();

} catch (Exception e) {

e.printStackTrace();

}

}

public static String queryNoPage(String sql) {

Connection conn = null;

Statement stat = null;

ResultSet rows = null;

StringBuffer buff = new StringBuffer();

try {

conn = getConnection();

stat = conn.createStatement();

}

catch (Exception e) {

e.printStackTrace();

return "[]";

}

try {

rows = stat.executeQuery(sql);

//得到数据集的列数

ResultSetMetaData rsmd = rows.getMetaData();

int colCount = rsmd.getColumnCount();

boolean first = true;

buff.append("[");

while (rows.next()) {

String rowStr = "";

for (int i = 1; i <= colCount; i ++ ) {

if (i>1) rowStr += ",";

String tempValue = rows.getString(i);

rowStr += String.format("%s", tempValue);

}

rowStr = String.format("\"%s\"", rowStr);

if (first) first = false;

else buff.append(",");

buff.append(rowStr);

}

buff.append("]");

}catch (Exception e) {

e.printStackTrace();

return "[]";

}

return buff.toString();

}

public static String queryData(String sql){

Connection conn = null;

Statement stat = null;

StringBuffer buff = new StringBuffer();

try {

conn = getConnection();

stat = conn.createStatement();

}

catch (Exception e) {

e.printStackTrace();

return "[]";

}

try {

stat = conn.prepareStatement(sql);

ResultSet rs =stat.executeQuery(sql);

//得到数据集的列数

ResultSetMetaData rsmd = rs.getMetaData();

int colCount = rsmd.getColumnCount();

String ret = "";

buff.append("[");

while(rs.next()){

String username = rs.getString("username");

String grade = rs.getString("grade");

String password = rs.getString("password");

ret += String.format("{\"username\" : \"%s\"", username);

ret += String.format(",\"grade\" : %s", grade);

ret += String.format(",\"password\" : \"%s\"},", password);

}

buff.append(ret);

buff.append("]");

rs.close();

} catch (SQLException e) {

e.printStackTrace();

return "[]";

}

try {

if (stat != null) stat.close();

if (conn != null) conn.close();

}

catch (Exception e) {

e.printStackTrace();

return "[]";

}

String str = buff.toString().replace(",]","]");

return str;

}

效果图