js呼叫後臺程式碼的幾種方法

antzone發表於2017-03-15
JS

本章節介紹一下如何使用javascript呼叫後臺程式碼，這裡只以asp.net為例。

呼叫方式一:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">  
var showMethod="<%=show()%>";  
alert(showMethod);  
</script>

以上程式碼可以彈出後臺函式show()的返回值。

呼叫方式二:

ajax方式，這是比較常用的。

前臺jquery程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
var params='{ext:"p9hp"}';//引數，注意引數名要注意和後臺方法引數名要一致        
  $(function(){
    $("#btnOk").click(function(){
      $.ajax({
        type:"POST",//請求方式
        url:"AjaxDemo.aspx/GetImg",//請求路徑：頁面/方法名字
        data: params,//引數
        dataType:"text",  
        contentType:"application/json; charset=utf-8",
        beforeSend:function(XMLHttpRequest){  
        $("#tips").text("開始呼叫後頭方法獲取圖片路徑,請等待");
        $("#imgFood").attr("src","image/loading.gif");
      },
      success:function(msg){//成功
        $("#imgFood").attr("src",eval("("+msg+")").d);  
        $("#tips").text("呼叫方法結束");
      },
      error:function(obj,msg,e){//異常
        alert("OH,NO");
      }               
    });
  });
});
</script>
</head> 
<body>
<form id="form1" runat="server">
  <div>
    <label id="tips"></label>
    <img id="imgFood" />
    <input value="點選我，給你看一張圖片" type="button" width="35px" id="btnOk"  />
  </div>
</form>
</body>
</html>

當然在實際應用中需要引入jQuery庫，這裡就省略了。

後臺程式碼如下:

[C#] 純文字檢視 複製程式碼
public static string GetImg(string ext)
{
  System.Threading.Thread.Sleep(5000);//為了有點等待的效果，延遲5秒
  StringComparer sc = StringComparer.OrdinalIgnoreCase;
  string[] extArr = new string[] { "php", "asp", "aspx", "txt", "bmp" };
  bool f = extArr.Any(s=>sc.Equals(s,ext));   //判斷傳入的字尾名是否存在
  if (f)
  {
    return "image/54222860.jpg";
  }
  return "image/star1.jpg";
}

相關文章