jquery写的ajax

Posted 非非是

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery写的ajax相关的知识,希望对你有一定的参考价值。

1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP \'Score.jsp\' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="css/table1.css">
	

  </head>
  
  <body>
   <script type="text/javascript">
function sub()
{
$.ajax({
    url:\'Score.action?\'+Math.random(),
    type:\'POST\', //GET
    async:true,    //或false,是否异步
    data:$(\'#form\').serialize(),//提交表单数据
    timeout:5000,    //超时时间
    dataType:\'json\',    //返回的数据格式:json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr);
        console.log(\'发送前\');
    },
    success:function(data,textStatus,jqXHR){
		$(\'#tb tr:not(:first)\').remove();
        for (var i = 0; i < data.length; i++) {
        $(\'#tb\').append(\'<tr><td>\' + data[i].id.number + \'</td><td>\' + data[i].id.name + \'</td><td>\'
         + data[i].id.classs + \'</td><td>\' + data[i].id.course + \'</td><td>\' + data[i].id.score + \'</td></tr>\');
        }        
        console.log(data);
        console.log(textStatus);
        console.log(jqXHR.responseText);
    },
    error:function(xhr,textStatus){
        console.log(\'错误\');
        console.log(xhr);
        console.log(textStatus);
    },
    complete:function(){
        console.log(\'结束\');
    }
});
}
  </script>
  
  <form id="form" action="" >
        <table> 
        <tr>
        	<th>课程<input name="course" id="course" type="text" size="10"></th>
        	<th>班级<input name="classs" id="classs" type="text"></th>
			<th>学生学号<input type="text" id="number" name="number"></th>
 			<th>学生姓名<input type="text" id="name" name="name"></th>			
			<th><input type="button" id="submit" value="查询" onclick="sub()"></th>
        </tr>
        </table>
        </form>
        
      <table id="tb" cellpadding="4">
       <tr>
       <th>学号</th>
       <th>姓名</th>
       <th>班级</th>
       <th>课程</th>
       <th>成绩</th>
       </tr>
          
    </table>        
  </body>
  
 
</html>

2.action(必须有set和get)

public String execute() throws Exception{
		if(classs.length()>0){
			if(course.length()>0){
				scorelist=mgr.findScoreByClassandCourse(classs, course);//一个班的某一科成绩
			}
			else{
				scorelist=mgr.findScoreByClass(classs);//一个班的所有成绩
			}
		}
		else if(number.length()>0){
			if(course.length()>0){
				scorelist=mgr.findScoreByNumberandCourse(number, course);//一个人的某一科成绩
			}
			else{
				scorelist=mgr.findScoreByNumber(number);//一个人的所有成绩
			}
		}
		else if(name.length()>0){
			if(course.length()>0){
				scorelist=mgr.findScoreByNumberandCourse(number, course);//一个人的某一科成绩
			}
			else{
				scorelist=mgr.findScoreByName(name);//一个人的所有成绩
			}
		}
		else if(course.length()>0){
			scorelist=mgr.findScoreByCourse(course);
		}
		else {
			scorelist.clear();
		}
		
		return SUCCESS;
	}

3.struts.xml

<package name="aaa" extends="json-default">

  

<action name="Score" class="ScoreAction">
	<result name="success" type="json">
	<param name="root">scorelist</param>
	</result></action>

4.结果截图

 

以上是关于jquery写的ajax的主要内容,如果未能解决你的问题,请参考以下文章

几个非常实用的JQuery代码片段

jQuery高级Ajax

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

ajax如何调用java写的webservices服务

通过JQuery实现Ajax代码