1. 程式人生 > >Jquery點選按鈕 非同步和同步提交表單

Jquery點選按鈕 非同步和同步提交表單

前臺部分程式碼:

    <form class="addSud" method="post" action="">
        <table>
        <tr>
        <td class="textRight">姓名</td>
        <td colspan="2"><input type="text" id="name" name="name"></td>
        <td class="textRight">學號</td>
        <td
colspan="2"><input type="text" id="studentId" name="studentId"></td> </tr> <tr> <td colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" id="addStudents" value="提交"></td> </tr> </table> </form
>

ajax提交表單程式碼:

    //增加學生,非同步提交學生表單
    $("#addStudents").click(function() {
        $.ajax({
            url: "addStudents.do",//要請求的伺服器url 
            //這是一個物件,表示請求的引數,兩個引數:method=ajax&val=xxx,伺服器可以通過request.getParameter()來獲取 
            //data:{method:"ajaxTest",val:value},  
            data
: { name: $("#name").val(), studentId: $("#studentId").val(), }, async: true, //是否為非同步請求 cache: false, //是否快取結果 type: "POST", //請求方式為POST dataType: "json", //伺服器返回的資料是什麼型別 success: function(result){ //這個方法會在伺服器執行成功是被呼叫 ,引數result就是伺服器返回的值(現在是json型別) if(result){ alert("true"); }else{ alert("false"); } } }); });

web.xml配置程式碼:

  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>addStudents</servlet-name>
    <servlet-class>org.cms.students.addStudents</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>addStudents</servlet-name>
    <url-pattern>/addStudents.do</url-pattern>
  </servlet-mapping>

addStudents.java程式碼(採用POST提交方式):

    publicvoiddoPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        System.out.println(name);
        System.out.println("123456789");
        out.print("false");
    }

ajax提交表單

通過上面的配置後,我輸入學生姓名然後提交表單,但是在myeclipse的控制檯裡並沒有打印出姓名和字串“123456789”,然後我就開始了瘋狂的檢查,檢查了n遍,還是不知道錯誤出現在哪裡,一次偶然的機會我發現了問題所在。我在ajax程式碼塊後加了個alert()語句,奇蹟出現了,瀏覽器彈出相應內容,myeclipse的控制檯裡打印出姓名和字串“123456789”,這讓我很是疑惑,在查閱大量部落格和官方文件後,我才明白一切都是JQuery ajax的同步和非同步提交的原因。
先來了解下JQuery ajax方法:

非同步的理解:當代碼執行到ajax部分時,它與ajax之後的外部程式碼是一起執行的,假如此時有外部程式碼要用到ajax中的返回值,而ajax的async屬性為true(即此時ajax為非同步),那麼後續的外部程式碼是不可能能拿到ajax的返回值的,只有設定為同步即ajax的async屬性為true,執行完ajax部分時,再接著執行後續程式碼時,才會在關係上產生連續性,則這樣才能拿到其返回值。

然後我就將async設定為false,問題真的解決了,但是還是不知道為什麼添加了alert語句即使是非同步也可以打印出姓名和字串?
繼續查閱資料我自己的總結如下(歡迎各位大牛指點):

1、async:true時:當點選提交按鈕時,執行點選事件裡的程式碼語句,執行到ajax時,由於是非同步執行,所以並不會阻塞後面語句的執行,因為後面沒有語句了,所以可能由於ajax還沒來得及執行完點選事件就結束了,自然就沒有打印出姓名和字串。如果在ajax後新增alert語句,點選事件就會被阻塞到這裡,這時ajax就有充足的時間執行,所以控制檯就能打印出姓名和字串。我嘗試去除外層的點選事件,直接執行ajax,這時不論同步或者非同步都可以打印出姓名和字串,可以證明我的猜想。
2、async:false時:當點選提交按鈕時,也會執行點選事件裡的程式碼語句,執行到ajax時,由於是同步執行,所以必須等ajax成功返回後才繼續執行後面的程式碼,自然就能打印出姓名和字串。

當然這些只是我個人的一些猜想,目前我還在查閱更多的資料來證明完善我的猜想,希望大牛們能指出我的錯誤,我一定虛心接受。

最近發現真正的原因是:
ajax本身就是非同步的,發起ajax請求後,當前的js還會繼續執行,如果你想通過ajax阻止提交,就不能在sumit事件中發起ajax,比如,搞個<input type='button'>(別用type=‘submit’,那個預設還是會提交表單,用button預設不會提交表單)。或者阻止按鈕的預設事件,在點選事件結束前加return false。

相關推薦

Jquery按鈕 非同步同步提交

前臺部分程式碼: <form class="addSud" method="post" action=""> <table> <tr> <td class="textRight">姓名</td&

按鈕新增刪除塊

    點選按鈕新增塊        <form action="" id="repairmain" method="post"> <!-- 頁面內容--> <div id="form"> <div c

表格按鈕新增刪除一行,新增刪除一列

html程式碼: <div> <input type="button" value="新增一行" onclick="editTable.addRow()"/> <input type="button" value="刪除一行" onclick

jq ajax 按鈕非同步載入更多

挺簡單的非同步載入 程式碼都有備註! 流程挺簡單的:查詢資料庫查出內容,寫分頁,前臺輸出,js非同步請求伺服器,控制器處理返回! 然後是按分頁請求!每次請求幾頁這樣。具體大夥去研究研究吧! // info/list.html 頁面程式碼 要載入的內容摘出來新建檔案放進去 &

基於jquery的實現非同步跨域提交的實現程式碼,需要的朋友可以參考下。

1.使用post提交方式 2.構造表單的數格式 3.結合form表單的submit呼叫ajax的回撥函式。 使用 jQuery 非同步提交表單程式碼: <html xmlns="http://www.w3.org/1999/xhtml"> <he

活用clonetrigger函式,按鈕原有事件不觸發,之後再觸發原有事件

活用clone和trigger函式,點選按鈕原有事件不觸發,之後再觸發原有事件 需求: 網站開發完畢了,然後產品說要在原來的’確認按鈕’點選後加一個’彈窗’提醒使用者一些注意事項,在使用者點選彈窗裡面的’同意按鈕’後再執行原來’確認按鈕’ 裡面繫結的事件。需求看起來很簡單,但是有一個要

element-ui 解析新增編輯。裡面按鈕上的click事件為什麼要那樣寫?

  1.首先新增頁面我們把定義的新增要填的表單繫結的model值全部又寫了一遍,和上面data裡面定義的格式是一樣的,為什麼呢?是多此一舉嗎? 當然不是。因為每次點選彈窗新增的表單都必須是置空的。而我們從新寫了一遍定義時的資料相當於把他置空了。   2

jquery實現按鈕返回到頁面頂部效果

有的時候我們需要實現點選按鈕回到頁面頂部的效果,下面就是我的實現 首先HTML程式碼如下 <div class="QZ-up" style="display: none;"></div> 當滾動條高度大於120px的時候出現按鈕如下

iOS開發之根據按鈕確定的section row

  分組的tableview cell上面有按鈕,根據按鈕確定點選的是哪一組的哪一行。對於初學者來說不好判斷,那麼下面就來跟大家分享一下如何實現吧。   cell 方法裡面新增   [cell.pingjiaBtn addTarget:self action:@selector(didPingJiaBut

Jquery 獲取驗證碼按鈕, 倒計時

1.具體思路         點選獲取驗證碼按鈕 —> 呼叫獲取驗證碼介面(忽略)—>獲取驗證碼按鈕切換到不可點選狀態,按鈕背景色呈灰色,按鈕文字呈現為“倒計時秒數+後可重新獲取”—> 倒計時60s後按鈕恢復可點選狀態,按鈕背景

JS獲取網頁的高寬 以及 按鈕回到頂部動畫

網頁可見區域寬: document.body.clientWidth 網頁可見區域高: document.body.clientHeight 網頁可見區域寬: document.body.offsetWidth (包括邊線的寬) 網頁可見區域高: document.body.offsetHe

jquery 隱藏按鈕的模仿事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </he

Android Dialog按鈕不關閉,控制視窗的顯示關閉

想象一下這樣的一個情景:彈出一個對話方塊,裡面可以編輯sql語句,編輯好以後點選確定按鈕,執行sql,此時對話方塊也會消失。如果sql順利執行,這種互動還是很不錯的。但是一旦sql執行出錯,對話方塊還是會關閉,對話方塊中的sql也就沒有了,只能重新編輯。如果sql很複雜,那

按鈕觸發Ajax非同步上傳檔案(附加:table按鈕刪除行)

一、使用背景 1、在專案中需要點選按鈕即上傳檔案,提交表單時只需要儲存檔案ID即可; 2、同一個表單中有多處需要上傳檔案,多個按鈕非同步上傳檔案互不影響; 3、java後臺使用同一個檔案上傳介面。 二、利用ajaxfileupload.js實現檔案非同步上傳 aja

clipboard非同步複製文字,按鈕發起非同步請求進行復制

需求描述:點選按鈕,發起一個非同步請求,將請求到的資料複製到剪下板。emmmmm半天嘗試了很多百度來的方法,都不能滿足需求,後面使用了Clipboard.js動態設定文字的方法和把ajax請求設定為同步的,實現了非同步的複製。直接看實現程式碼:<b-button id=

jquery一個按鈕動態生成一組能刪除的input框

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <titl

jquery實現按鈕變換背景顏色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

form提交按鈕提交form

需求是:新增頁面,有一個表單要提交,正常直接在action中寫url,點選submit按鈕就可以提交了,但我希望能夠在表單提交之前驗證一下文字框內容。於是,使用jquery來驗證表單,驗證通過後提交form表單。 幾天前使用jquery提交form表單.jquery的各種方法都嘗試過了,但就是不可以,今

JQuery實現按鈕來顯示/隱藏某個div

剛開始我還在判斷div的display屬性是不是等於"none",來選擇是show()還是hide(),現在才想起來直接用toggle()方法就可以了嘛,真的是太方便了 使用jQuery的時候,千萬不

jquery a標籤不可,繫結bind/解除unbind,ajax防止重複提交

方法1 (繫結bind/解除unbind點選): <a href="javascript:void(0)" id="dianji">點選</a> <br/><