1. 程式人生 > >用ajax提交form並將返回值顯示在網頁

用ajax提交form並將返回值顯示在網頁

簡單說一下做的是什麼:

一個篩選器

其實就是一個篩選器,當然實際內容比這個多,所以如果採用引數的方法進行傳遞,非瘋掉不可,所以想要用form的形式進行;

解決方案:ajax+form的submit

麻煩:這個方案也有麻煩——就是雖然在前端寫的程式碼少了,但是後端程式碼多寫了,而且複雜程度其實比前端高。

先看前端程式碼(省略了內容部分):

<form class="tiaojian main_n" id="sxtj">
            <p> 
               <strong>學校型別:</strong>
                <input type="checkbox" name="yike[]" value="yes">醫科大學   
                <input type="checkbox" name="yike[]" value="no">非醫科大學
            </p>
            <div class="clearfix">
                <p style="float: left;height: 50px;width: 86px"><strong>所屬省市:</strong></p>
                <p><span class="xmb"><input type="checkbox" name="city[]
" value="安徽">安徽</span><span class="xmb"><input type="checkbox" name="city[]" value="北京">北京</p> <strong>學科方向:</strong> <input type="checkbox" name="fangxiang[]" value="基礎">基礎 <input type="checkbox" name="fangxiang[]" value="發展與教育">發展與教育 </p> <p class="anniu"> <button class="submit" onclick="return sx()">篩選</button> <button onclick="return qbxx()">顯示全部學校</button> <button onclick="return cxxz()">清空選項</button> </p> </form>

要點1:checkbox的name屬性必須是陣列屬性,這個對後臺很關鍵,否則,$_POST和$_GET抓不到全部資料;帶來的問題是,$_POST['city']得到的是陣列,注意,在PHP後臺name不帶[]

看JS程式碼:

function sx() {
$.ajax({
        type:"POST",
        url:"./API/shaixuanxx.php?q=0",
        data:$("#sxtj").serialize(),
        error:function (request) {
            alert("網路連線錯誤");
        },
        success:function (data) {
            $("#xxzsq").html(data);
        }
    });
    return false;
}

要點2:關鍵在於傳輸的data是對於form的表單值的序列化;非常重要的一步;

後端程式碼(PHP):提取資料後輸出的部分沒寫,因為太常規了,沒有難度。

if ($q==0){
	$sxtj='city IN '.arr($_POST['city']);
	if (sizeof($_POST['yike'])==1){
		if ($_POST['yike'][0]=='yes'){
			$sxtj=$sxtj.' AND xx_name LIKE "%醫%"';
		}else{
			$sxtj=$sxtj.' AND xx_name NOT LIKE "%醫%"';
		};
	};
	if (sizeof($_POST['fangxiang'])==2){
		$sxtj=$sxtj.' AND fangxiang regexp '.'"'.$_POST['fangxiang'][0].'|'.$_POST['fangxiang'][1].'"';
	}elseif (sizeof($_POST['fangxiang'])==1){
		$sxtj=$sxtj.' AND fangxiang regexp'.'"'.$_POST['fangxiang'][0].'"';
	};
}

$sql="SELECT id,xx_name FROM jibenxinxi WHERE ".$sxtj;

要點3:因為在從資料庫裡面取值時條件會很長,所以需要提前先寫好一串字串,要注意的是,因為是字串,所以必須放在""外,用連線符連線。

因為WHERE  name IN ("xx","xx")的格式比較特殊,("xx","xx")不是陣列,所以必須把從ajax傳遞過來的值先變成這個樣子,我自定義了一個函式arr($_POST[])用來做這個。

總體上而言,當有大量資料需要提交,而且要返回大量資料進行使用時還是挺麻煩的。目前我只嘗試了這一種方法。希望以後能夠有其他方法更高效一些。


相關推薦

ajax提交form返回顯示網頁

簡單說一下做的是什麼:其實就是一個篩選器,當然實際內容比這個多,所以如果採用引數的方法進行傳遞,非瘋掉不可,所以想要用form的形式進行;解決方案:ajax+form的submit麻煩:這個方案也有麻煩——就是雖然在前端寫的程式碼少了,但是後端程式碼多寫了,而且複雜程度其實比

Java調Python腳本獲取返回

enum 獲取 error code adt catch sys.argv AI oot 在Java程序中有時需要調用Python的程序,這時可以使用一般的PyFunction來調用python的函數並獲得返回值,但是采用這種方法有可能出現一些莫名其妙的錯誤,比如Impor

PHP利用CURL方法模擬POST提交資料獲得返回的小細節

背景:我與同事之間互相呼叫API,進行資料處理,並返回處理結果 互動:我傳遞一個圖片資訊過去,他那邊給我返回一個識別影象結果的json物件。 方法:使用php的自帶curl函式 詳情:    一.開啟擴充套件服務:開啟php.ini檔案,把 “;extension=php_

ajax提交form表單到servlet,網頁的跳轉

jsp介面如下: <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3

form+iframe+file 頁面無重新整理上傳檔案獲取返回

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><but

form表單提交之後,獲取返回

有時候 使用form表單提交 不想跳轉頁面。獲取返回值 第一種方式 , 讓form 預設調整當前的iframe 即可 參考: https://www.jianshu.com/p/ccdb9415cd6b 第二種就是  引入 引用jquery-form.js檔案 https://w

form上傳檔案獲取返回

 原理:頁面寫一個隱藏的iframe,form的target指向這個iframe,在iframe的load事件中獲取返回結果。 <!-- 上傳 --> <form action=""

點選button觸發JS函式,通過AJAX給後臺查詢,返回處理成table表格,新增到模態框裡顯示

//點選觸發onclick事件,攜帶此行的bodycode傳參給JS函式tiaozhuan();(這裡的<a>標籤,可以換成<button>) <td> <a href="javascript:void(0);" oncli

模態的方式開啟自定義JDialog,獲取返回

JFrame的變數名為jf JDialog的類名為Fff btnLoadImage.addMouseListener(new MouseAdapter() { @Override public void mouseClicked(MouseEvent e) {

Django + Ajax傳送POST表單,返回資訊回顯到頁面中

將表單資料傳送回後端,然後處理後端返回的資訊並顯示在當前頁面中,這裡使用Ajax進行處理; 那麼先看js程式碼: <!--以下為 Ajax指令碼 --> <script src="http://apps.bdimg.com/li

Ajax提交form表單總是返回error函式

這是ajax程式碼 function saveUser() { $.ajax({ type:"POST", url:"SaveUser.action", data:$('#

ajax提交表單時對data傳動態變化時的處理

可能是個人水平不夠,找了好多資料才弄出來。現在把程式碼貼出來。 ajax處理頁面上動態顯示的文字框值: $(function(){parent.$.messager.progress('close')

使用ajax提交form表單,包括ajax文件上傳 轉http://www.cnblogs.com/zhuxiaojie/p/4783939.html

ima option img jquery選擇器 open request resp logs ges 使用ajax提交form表單,包括ajax文件上傳 前言 使用ajax請求數據,很多人都會,比如說: $.post(path,{data:data},function

工作中如何使用ajax提交form表單,包括ajax文件上傳

msu 包括 需要 java tip ror 存儲 adf ucc 提供一種方法就是利用jquery.form.js,我們是和java對接的後臺。 代碼如下: <input type="text" id="text1"> <input type="text

Android平臺調Web Service:線程返回

繼承 write 能夠 call() ted uil code 等待 @override 接上文 前文中的遺留問題 對於Java多線程的理解。我曾經只局限於實現Runnable接口或者繼承Thread類,然後重寫run()方法,最後start()調用就算完事。可

通過shell備份oracle戶數據,巡檢結果發送至windows跳板機

sbin ati tail 每次 img bsp product border article 背景:生產環境有oracle服務器,有數據庫用戶若幹,需要通過exp方式備份數據庫用戶數據,需要巡檢數據庫備份的結果。 目標:通過Linux shell+exp+crontab進

java後臺發送請求獲取返回

otto wid eight quest 所有 ica 輸出流 lds thead 項目中需要前端發送請求給後端,而後端需要從另一個平臺中取數據然後再透傳給前端,通過下述代碼將其實現.在此記錄一下.package com.autotest.utils;import java

在批處理中調VBScript(支持獲取返回

都是 exp sap net 什麽 api 獲得 鏈接 結果 有個帖子簡單介紹了利用mshta來調用vbs的方法(鏈接)。雖該文章作者認為 到此,在bat中使用vbs得到了完全解決。從此可以在bat和vbs間自由的航行了。 但任然無法獲取vbs的返回值,可見該方法有一定

三層+EasyUI+Ajax 提交Form表單

log src body 提交 easy orm img yui class 三層+EasyUI+Ajax 提交Form表單