jq程式碼學習19----- jq中的ajax全域性事件

阿新 • • 發佈：2019-02-01

jq簡化AJAX操作不僅體現在呼叫AJAX方法和處理響應方面，而且還體現在對呼叫AJAX方法的過程中的http請求的控制，通過jq提供的一些自定義全域性函式，能能夠為各種與ajax請求結束時，會觸發ajaxStop（）方法的回撥函式。這些方法都是全域性函式，因此無論建立它們的程式碼位於何處，只要發生ajax請求，就會觸發他們。
demo.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 
 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
#loading{
    width:80px;
    height: 20px;
    background:#bbb;
    color 
:#000;
    display:none;
}
img{border:0;height:100px;width:100px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery.js" 
 type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(function(){
    //demo1:
        $('#send1').click(function() {
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                      function(data){
                          $("#resText1").empty();
                          $.each(data.items, function( i,item ){
                                $("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
                                if ( i == 3 ) { 
                                    return false;
                                }
                          });
                     }
            ); 
       });

   //demo2:
       $("#send2").click(function(){
            $.get("get1.php", { 
                        username :  $("#username").val() , 
                        content :  $("#content").val()  
                    }, function (data, textStatus){
                        $("#resText2").html(data); // 把返回的資料新增到頁面上
                    }
            );
       })

        $.ajaxPrefilter(function( options ) {
            options.global = true;
        });
        //共用這2個全域性的ajax事件
       $("#loading").ajaxStart(function(){
          $(this).show();
       });
       $("#loading").ajaxStop(function(){
          $(this).hide();
       });


   })
//]]>
</script>
</head>
<body>
<br/>
<div id="loading">載入中...</div>

<br/>
Demo1:
<br/>
<input type="button" id="send1" value="載入"/>
<div id="resText1" ></div>


<br/>
Demo2:
<br/>
<form id="form1" action="#">
<p>評論:</p>
 <p>姓名: <input type="text" name="username" id="username" /></p>
 <p>內容: <textarea name="content" id="content"  rows="2" cols="20"></textarea></p>
 <p><input type="button" id="send2" value="提交"/></p>
</form>
<div  class='comment'>已有評論：</div>
<div id="resText2" >
</div>


</body>
</html>

get1.php

<?php 
    header("Content-Type:text/html; charset=utf-8");
    echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>

jq程式碼學習19----- jq中的ajax全域性事件

jq簡化AJAX操作不僅體現在呼叫AJAX方法和處理響應方面，而且還體現在對呼叫AJAX方法的過程中的http請求的控制，通過jq提供的一些自定義全域性函式，能能夠為各種與ajax請求結束時，會觸發ajaxStop（）方法的回撥函式。這些方法都是全域性函式，因此

jq程式碼學習12---下拉框左右選擇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

js程式碼學習19---網頁換面板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

HEVC程式碼學習19：MV、MVD、MVP概念解析

在程式碼閱讀中，可以看到MV、MVD、MVP三個概念，在開始學習的時候就很糊塗，一直買具體來看下，也找不到具體在哪裡有講解，現在來關注學習一下。先來逗比一下，名詞解析： MVP——most valuable player，那MVD是什麼呢？most val

Ajax學習系列——jQuery中Ajax的請求方式

content ica 添加 clas feed error: div 常見 con 在jQuery中，Ajax常見的請求方式主要有4種。 1、$.ajax()返回其創建的XMLHttpRequest對象。 $.ajax({ 　　type:"POST", 　　c

通過程式碼學習C#&.NET——委託使用（事件、定時處理）

程式碼編寫及執行環境Visual Studio 2010 .NET v4.0.30319 using System; using System.Collections.Generic; using System.Linq; using System.Text; using

Python自動化開發學習24-Django中（AJAX）

python django 講師的博客地址：http://www.cnblogs.com/wupeiqi/articles/5703697.html 。號稱是AJAX全套原生Ajax Ajax主要就是使用 XmlHttpRequest 對象來完成請求的操作，該對象在主流瀏覽器中均存在（除了早期的IE

C++PrimerPlus學習之C++中的程式碼重用

has-a關係包含物件成員的類易於理解及使用可包含多個基類，易於區分。建構函式初始化的是成員物件，而不是繼承的物件，所以在初始化列表中使用的是成員名，而不是類名。當初始化列表包含多個專案時，這些專案被初始化的順序為

簡單的jQ程式碼

tp5中前端js程式碼中ajax請求url問題

請注意：在tp5框架中，js程式碼不能使用全域性函式！所以試圖使用函式{:url()}是解決不了問題的！在社群中發帖諮詢，直接使用相對地址即可！程式碼如下： type:'get', url:'alertinfo/drawing', data: "message="+start.

ajax賦值給js中的全域性變數

在檢視頁面中，正在給bootstrap-table的表格中填入內容，由於內容需要轉換，所以需要再次呼叫Ajax;如下圖所示：注意點： async:false (即取消非同步)

ASP.NET Core 中的Ajax全域性Antiforgery Token配置

前言本文基於官方文件《在 ASP.NET Core 防止跨站點請求偽造 (XSRF/CSRF) 攻擊》擴充套件另一種全域性配置Antiforgery方法，適用於使用ASP.NET Core Razor + JQuery Ajax的專案，喜歡玩前後端分離的同學可以酌情參考，但希望不要對XSRF/CSRF掉以

前端學習記錄-jq選擇器

學了又忘，遂記之 jq選擇器： .parent() 父元素，由選擇器篩選（可選），如：$("p").parent(".selected") .parents() 祖先元素，，由選擇器篩選（可選），如：$("p").parent(".selected") .chi

ajax跨域請求結合springmvc後臺程式碼學習整理

ajax跨域請求，在工作中遇到使用ajax發起請求獲取資料，但是請求的資料不在同一個域下，這樣子就要使用到ajax的跨域請求了！我使用的框架 SpringMVC，我在PC端的專案裡面寫一個介面方法，

ubuntu執行《機器學習實戰》中需修改程式碼的地方

ubuntu中執行《機器學習實戰》需要修改的地方： P66頁：第二行程式碼應該寫為：emailText = open(‘email/ham/6.txt’,’rb’).read().decode(‘GBK’)

Hadoop 學習研究(八): 多Job任務和hadoop中的全域性變數

/* * 重寫Mapper的setup方法，獲取分散式快取中的檔案 */ @Override protected void setup(Mapper<LongWritable, Text, Text, Text>.Context context)

jq 將form表單中的資料轉為json

/** * 獲取提交的資料 * @param obj * @returns {{}} */m.getParameterMap = function (obj) { var setmultivalue = function (val, name, value) {

Atom編輯器折騰記_(14)JQ程式碼片段補全(外掛:Jquery-snippets)

題外話一款好的程式碼片段外掛可以提高我們寫程式碼的效率.這是一個不爭的事實; 今天,我要推薦的這一款,就是可以快速寫JQ的外掛外掛作者: james2doyle 直入主題,最簡易的安裝方式,進入設定中心搜尋Jquery-snippets -

C++學習筆記，關於一個檔案中的全域性變數在其他檔案中的使用

錯誤：多重定義和 xxx變數已經在xxx.obj中定義當在一個.cpp檔案中定義了一個全域性變數之後，需要在其他檔案中使用時，需要用到關鍵字extern 當使用extern修飾一個變數時，例如extern int x; 代表當前變數x 的定義來自於其他檔案，當進行

jq中繫結事件bind(),live(),delegate(),on()的優缺點

前言　　因為專案中經常會有利用jquery操作dom元素的增刪操作，所以會涉及到dom元素的繫結事件方式，簡單的歸納一下bind,live,delegate,on的區別，以便以後查閱，也希望該文章日後能幫助到園友，文中如有不當之處，還望各位指正，話不多說，直接進入正題

jq程式碼學習19----- jq中的ajax全域性事件

相關推薦