asp ajax 執行個體（post,get,form測試)(1/3)

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章提供一款簡單asp教程 ajax 執行個體（post,get,form測試)哦，他做了三個相關ajax asp測試執行個體，都通過了。

index.html

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>艾恩ajax類</title>
<link type="text/css教程" rel="stylesheet" href="css.css" />
<script language="網頁特效" type="text/javascript" src="jo.ajax.js"></script>
<script language="javascript" type="text/javascript">
/*測試ajax功能(類似jquery的ajax,功能沒它的強大,但使用更方便),自動防止緩衝*/
function testajax(){
    document.getelementbyid("ajaxresult").innerhtml="<img src="loading.gif" alt="" /> 請求資料中...";
    ajax({
        asc:true,
        url:"test_ajax.asp?get=" + "我的id是anlige".utf8(),
        data:"post=tandy",
        method:"post",
        datatype:"json",
        succeed:function(msg,obj,setting){
            var str="";
            str=str+"請求的url: " + setting.url + "<br />";
            str=str+"請求的方式: " + setting.method + "<br />";
            str=str+"請求的資料: " + setting.data + "<br /><br />";
            str=str+"返回的文本: " + obj.responsetext + "<br /><br />";
            str+="json資料:<br />";
            str+="我的id是: " + msg.id + "<br />";
            str+="我的名字是: " + msg.name + "<br />";
            document.getelementbyid("ajaxresult").innerhtml=str;
        }
    });
    return true;
}

function servervariables(variable){
    document.getelementbyid("variresult").innerhtml="<img src="loading.gif" alt="" /> 變數讀取中...";
    ajax({
        url:"test_ajax_time.asp",
        method:"get",
        datatype:"text",
        data:"v=" + variable,
        succeed:function(msg){
           document.getelementbyid("variresult").innerhtml=variable + " = " + msg;
        }
    });
}

function postfrom(obj){
ajax({
  form:obj,
        datatype:"text",
        succeed:function(msg,o,s){
           document.getelementbyid("formajaxresult").innerhtml=msg;
        },
  error:function(s){alert(s);}
    });
}

function testget(){
ajax.get("test_ajax_time.asp","v=url",function(msg){alert(msg);});
}

function testpost(){
ajax.post("test_ajax.asp","post=tandy",function(msg){alert(msg);});
}

</script>
</head>
<body>
<p><span style="font-size: 12pt"><strong>艾恩ajax類</strong></span></p>
    <hr />
    <h5>測試1-擷取伺服器變數，使用get方式</h5>
擷取伺服器變數 : <input type="text" id="vari" size="30" value="remote_addr" onblur="return servervariables(this.value);" /> 文字框失去焦點，自動調用<br />
<div id="variresult"></div>
  <div class="info">您可以輸入其他相關變數進行測試,例如http_referer,url,server_name</div><br />
    <hr />
    <h5>測試2-提交相對複雜資料，返回json資料，使用post方式</h5>
<input type="button" value="擷取json資料" onclick="return testajax();" style="font-size: 9pt" /> 
<div id="ajaxresult" style="font-size: 9pt"></div>

<hr />
<h5>測試3-ajax提交form</h5>
<form action="test_post_form.asp?myname=anlige" method="post">
  文字框：<span><input type="text" name="text1" value="測試test" style="border:1px #ddd solid;" /></span><br />
  複選框1：<input type="checkbox" name="check1" value="" style="border:0px" /><br />
  複選框2：<input type="checkbox" name="check2" value="the value of check2" style="border:0px" /><br />

  單選框：<input type="radio" name="radio" value="value1" style="border:0px" />選項1 <input type="radio" name="radio" value="value2" style="border:0px" />選項2<br />
  下拉式清單：<select name="select1">
   <option value="test1">測試1</option>
   <option value="test2">測試2</option>
  </select>
  <input type="submit" value="提交" onclick="postfrom(this.form);" />
</form>
<div id="formajaxresult" style="font-size: 9pt"></div>
<hr />
<h5>測試4-ajax的簡潔調用-get和post方法（統一使用非同步擷取文本的方式）</h5>
<input type="button" value="測試ajax.get" onclick="testget();" />
<input type="button" value="測試ajax.post" onclick="testpost();" />

<h5>ajax類庫使用說明</h5>
    <p>
        <span>
  完整調用統一調用入口：<span style="color: #ff0000">ajax(setting);</span> 關於參數setting,請詳細參考下面的說明。<br /><br />
  簡潔調用入口：<span style="color: #ff0000">ajax.get(url,data,fn);</span> 以及 <span style="color: #ff0000">ajax.post(url,data,fn);</span><br /><br />
ajax的配置:<br />
    <span style="color: #0000ff">
var</span> settings = {
    <br />
       <span style="color: #ff0000"> asc</span>: <span style="color: #0000ff">
        true</span>,    <span style="color: #006600">//true-非同步傳輸；false-同步傳輸</span>
    <br />
   <span style="color: #ff0000"> form</span>: <span style="color: #0000ff">
        formobj</span>,    <span style="color: #006600">//表單對象,如果設定本項，則會用ajax提交表單，忽略設定的method,url和data屬性</span>
    <br />
        <span style="color: #ff0000">url</span>: <span style="color: #660033">
        ""</span>,    <span style="color: #006600">//若不設定form屬性，則本項為必選值</span><br />
        <span style="color: #ff0000">datatype</span>: <span style="color: #660033">
        "text"</span>,    <span style="color: #33cc00"> <span style="color: #006600">//可取值text,xml,json</span></span><br />
        </span></span>    <span style="color: #ff0000">method</span>: <span style="color: #660033">
            "get"</span>,    <span style="color: #006600">//可取post,get 不區分大小寫。設定form屬性後，本項會被忽略。</span>
    <br />
        <span style="color: #ff0000">data</span>: <span style="color: #660033">
        ""</span>,    <span style="color: #006600">//具體格式請看樣本程式。設定form屬性後，本項會被忽略。</span><br />
    <span style="color: #ff0000">timeout</span>: <span style="color: #660033">
        10000</span>,    <span style="color: #006600">//設定逾時時間，預設為10秒（即10000毫秒）</span><br />
        <span style="color: #ff0000">succeed</span>: <span style="color: #0000ff">
        function</span>(a,b,c){<span style="color: #0000ff">return true</span>},
    <br />
        <span style="color: #ff0000">error</span>: <span style="color: #0000ff">
        function</span>(a,b,c){<span style="color: #0000ff">return true</span>},
    <br />
    <span style="color: #ff0000">ontimeout</span>: <span style="color: #0000ff">
        function</span>(a,b,c){<span style="color: #0000ff">return true</span>}
    <br />
};<br />
        </span>
    </p>

</body>
</html>

首頁 1 2 3 末頁

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

asp ajax 執行個體（post,get,form測試)(1/3)

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support