1. 程式人生 > >關於如何用jquery的ajax來實現資料的互動

關於如何用jquery的ajax來實現資料的互動

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">發現網上有很多關於如何使用jquery的ajax來實現資料的傳送,但是都很不具體,正好有個專案用到,和大家分享一下關於ajax的使用</span>

簡單描述一下,在前面的jsp頁面的script裡面寫ajax,並且傳送資料到struts的action中,並且在action裡面實現資料的查詢,將查詢的資料放在一個list裡面,再把list封裝成json物件,然後在讓前臺頁面進行接收,將接收的資料在jsp頁面進行顯示,將資料放在一個table之中;

首先是要匯入的js

jquery-1.7.2.js

	function selectValue() {
		with (document.myForm) {
			var deptx = dept.value;
			var majorx = major.value;
			var varUrl = "${ pageContext.request.contextPath }/message/get";//(get是一個action struts裡面的)
			$
					.ajax({
						type : "get",
						url : varUrl,
						cache : false,
						data : "dept=" + deptx + "&major=" + majorx,//(這裡的變數可以修改)
						dataType : 'json',
						success : function(json) {
							var strGetCourse = "";
<span style="white-space:pre">							</span>//將資料以每行6個的形式顯示
							strGetCourse = strGetCourse + "<table border=1px class='row'>";
							for (var i = 0; i < json.length; i++) {
								if (i % 6 == 0) {
									strGetCourse = strGetCourse + "<tr>";
								}
								strGetCourse = strGetCourse
										+ "<td><input type='checkbox' name='sel_course' value='" + 
		        json[i].name + "'>"
										+ json[i].name + "</input></td>";
								if (i % 6 == 0 && i != 0) {
									strGetCourse = strGetCourse + "</tr>";
								}
							}
							strGetCourse = strGetCourse + "</table>";
							alert(strGetCourse);
							course_learned.innerHTML = strGetCourse;//將table放在一個名為<span style="font-family: Arial, Helvetica, sans-serif;">course_learned的div裡面</span>

						},
						error : function(text) {
							alert("對不起,使用者ID不存在,請輸入正確的使用者ID");
						}
					});
		}
	}

接下來是struts的配置檔案
<package name="message" namespace="/message" extends="json-default">
		<action name="get" class="stu.action.MessageAction" >
			<result type="json">
				<param name="root">list</param>
			</result>
		</action>
	</package>
然後是MessageAction這是一個java類
public String execute() throws Exception {
		list=new ArrayList();
		major = new String( major.getBytes("iso8859-1"),"utf-8"); 
		System.out.println(major);
		  Connection conn=null;
       	  PreparedStatement psmt=null;
       	  ResultSet rs;
       	  String sql="select Course,Course_id from stu_course where major=?";
       	  try {
       		  	conn=getConnection.getConnection();
       		  	psmt=conn.prepareStatement(sql);
       		    psmt.setString(1, major);
       		    rs=psmt.executeQuery();
    			while(rs.next()){
    				Course course=new Course();
    				course.setCourseid(rs.getString("Course_id"));
    				course.setName(rs.getString("Course"));
    				list.add(course); 
   			}
    			System.out.println(list.size());
    		} catch (SQLException e) {
    			
    			e.printStackTrace();
    		} catch (ClassNotFoundException e) {
				
				e.printStackTrace();
			}
       	  finally{
       		
       		  if (conn!=null) {
				try {
					conn.close();
				} catch (SQLException e) {
					
					e.printStackTrace();
				}
			}
       		
       	  }
		
		return Action.SUCCESS;
	}


裡面還涉及到一些類的封裝,對整個程式碼的理解沒多大關係,就不上傳了,希望幫助大家理解

相關推薦

怎麼理解程式碼實現資料結構

怎麼能更好的用程式碼實現資料結構內容? 個人理解為:1.首先要掌握資料結構的邏輯,也就是說要知道資料結構是怎麼實現的。這一點達不到的話,後面根本就無從談起。                   &nbs

axios實現資料請求

cdn載入 <script src="https://unpkg.com/axios/dist/axios.min.js"> </script> get請求 axios.get('/detail?id=10').then(function (r

AsyncTask實現非同步請求網路資料

public class HelperAsnc { public HelperAsnc(){} //get請求 public HelperAsnc get(String url){ doHttp(url,"GET",""); retu

js實現那些資料結構14(樹02-AVL樹)

在使用二叉搜尋樹的時候會出現 一個問題,就是樹的一條分支會有很多層,而其他的分支卻只有幾層,就像下面這樣:  如果資料量夠大,那麼我們在某條邊上進行增刪改查的操作時,就會消耗大量的時間。我們花費精力去構造一個可以提高效率的結構,反而事與願違。這不是我們想要的。所以,我們需要另

關於如何用jquery的ajax實現資料互動

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">發現網上有很多關於如何使用jquery的ajax來實現資料的傳送,但是都

資料結構課程設計---------實現表示式求值

1、需求分析 設計一個程式,演示用算符優先法對算術表示式求值的過程。利用算符優先關係,實現對算術四則混合運算表示式的求值。 (1)輸入的形式:表示式,例如2*(3+4)      包含的運算子只能有'+' 、'-' 、'*' 、'/' 、'('、 ')'; (2)輸出的形式

Jquery實現點擊事件等的功能

點擊事件 image alt logs ima log ges query images 用Jquery來實現點擊事件等的功能

openpyxl實現99乘法表

python openpyxl openpyxl作為excel眾多的一員,具有簡單易用,功能廣泛的特點。環境: win 10 python 3.6 pip 9.0.1 openpyxl 2.4.8安裝openpyxl 打開cmd命令行,輸入pip install

[LeetCode] 232. Implement Queue using Stacks 實現隊列

logs not IT pty HA 實現 AC ted .cn Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of

js實現那些數據結構(數組篇01)

指定 賦值 重要 原始類型 delete 號稱 如果 開發 實現原理    在開始正式的內容之前,不得不說說js中的數據類型和數據結構,以及一些比較容易讓人混淆的概念。那麽為什麽要從數組說起?數組在js中是最常見的內存數據結構,數組數據結構在js中擁有很多的方法,很多初學者

232 Implement Queue using Stacks 實現隊列

whether light 操作 move bool problem rem http rip 使用棧來實現隊列的如下操作: push(x) -- 將一個元素放入隊列的尾部。pop() -- 從隊列首部移除元素。peek() -- 返回隊列首部的元素。empty() --

js實現那些數據結構10(集合02-集合的操作)

交集 學習 href targe 更改 分類 擁有 ren log   前一篇文章我們一起實現了自定義的set集合類。那麽這一篇我們來給set類增加一些操作方法。那麽在開始之前,還是有必要解釋一下集合的操作有哪些。便於我們更快速的理解代碼。   1、並集:對於給定的兩個集合

js實現那些數據結構11(字典)

完成 str function .get 自己的 items 結構 AR pre   我們這篇文章來說說Map這種數據結構如何用js來實現,其實它和集合(Set)極為類似,只不過Map是【鍵,值】的形式存儲元素,通過鍵來查詢值,Map用於保存具有映射關系的數據,Map裏保存

js實現那些數據結構14(樹02-AVL樹)

PE 有一個 解決 講解 html 16px var map 操作   在使用二叉搜索樹的時候會出現 一個問題,就是樹的一條分支會有很多層,而其他的分支卻只有幾層,就像下面這樣:   如果數據量夠大,那麽我們在某條邊上進行增刪改查的操作時,就會消耗大量的時間。我們花費精力

js實現那些數據結構15(圖01)

ice ring repeat fan lB tool ati ges lba 其實在上一篇介紹樹結構的時候,已經有了一些算法的相關內容介入。而在圖這種數據結構下,會有更多有關圖的算法,比如廣度優先搜索,深度優先搜索最短路徑算法等等。這是我們要介紹的最後一個數據結構。同時也

Vue實現音樂播放器(十六):滾動列表的實現

com 作用 efault nor 大小 -s stylus BE ack 滾動列表是一個基礎組件 他是基於scroll組件實現的 在base文件夾下面創建一個list-view文件夾 裏面有list-view.vue組件 <template>

Vue實現音樂播放器(十八):右側快速入口點擊高亮

為我 UC 沒有 short cut this 必須 左右 png 問題一:當我們點擊右側快速入口的時候 被點擊的地方高亮 首先我們要知道右側快速入口是為什麽高亮??因為當watch()監控到scrollY的變化了的時候 將scrollY的值和listHeight相比較

Vue實現音樂播放器(八):自動輪播圖啊

-s AR better hold ons ntp next start upd slider.vue組件的模板部分 <template> <div class="slider" ref="slider"> <div class=

Vue實現音樂播放器(九):歌單數據接口分析

QQ 插件 但是 之間 nbsp 跨域問題 前端 代理服務 一點 z這裏如果我們和之前獲取輪播圖的數據一樣來獲取表單的數據 發現根本獲取不到 原因是qq音樂在請求頭裏面加了authority和refer等 但是如果我們通過jsonp實現跨域

Vue實現音樂播放器(三十八):歌詞滾動列表的問題

vue 三十八 pla -s toggle 情況 TP 解決辦法 暫停 1、頻繁切換歌曲時,歌詞會跳來跳去 原因: // 歌詞跳躍是因為內部有一個currentLyric對像內部有一些功能來完成歌詞的跳躍 //每個currentLyric能實現歌曲的播放跳到相應的位置 是