• jquery调用页面后台方法‏


    给出了两个简单的例子,无参数的和有参数的,返回的都是json数据。

    前台html代码:

    View Code
      1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %>
    2
    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4
    5 <html xmlns="http://www.w3.org/1999/xhtml" >
    6
    7 <head runat="server">
    8
    9 <title></title>
    10
    11 <script type="text/javascript" src="JS/jquery-1.4.2.js"></script>
    12
    13
    14
    15 <script type="text/javascript">
    16
    17 $(document).ready(function() {
    18
    19 $("input[type='button'][value='GetDate']").click(function() {
    20
    21 $.ajax({
    22
    23 type: "post",
    24
    25 url: "JqueryCSMethodForm.aspx/GetNowDate",
    26
    27 datatype: "json",
    28
    29 contentType: "application/json; charset=utf-8",
    30
    31 success: function(data) {
    32
    33 $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);
    34
    35 },
    36
    37 error: function(XMLHttpRequest, textStatus, errorThrown) {
    38
    39 alert(errorThrown);
    40
    41 }
    42
    43 });
    44
    45 });
    46
    47 $("input[type='button'][value='GetOneDayLater']").click(function() {
    48
    49 $.ajax({
    50
    51 type: "post",
    52
    53 url: "JqueryCSMethodForm.aspx/GetOneDayLate",
    54
    55 data:"{days:1}",
    56
    57 datatype: "json",
    58
    59 contentType: "application/json; charset=utf-8",
    60
    61 success: function(data) {
    62
    63 $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);
    64
    65 },
    66
    67 error: function(XMLHttpRequest, textStatus, errorThrown) {
    68
    69 alert(errorThrown);
    70
    71 }
    72
    73 });
    74
    75 });
    76
    77 });
    78
    79
    80
    81 </script>
    82
    83 </head>
    84
    85 <body>
    86
    87 <form id="form1" runat="server">
    88
    89 <div>
    90
    91 <input type="button" value="GetDate" />
    92
    93 <input type=button value="GetOneDayLater" />
    94
    95 <input type="text" id="showTime" />
    96
    97 </div>
    98
    99 </form>
    100
    101 </body>
    102
    103 </html>

    CS代码:

    View Code
     1 using System;
    2
    3 using System.Collections.Generic;
    4
    5 using System.Linq;
    6
    7 using System.Web;
    8
    9 using System.Web.UI;
    10
    11 using System.Web.UI.WebControls;
    12
    13 using System.Web.Services;
    14
    15 namespace JQuerWeb
    16
    17 {
    18
    19 public partial class JqueryCSMethodForm : System.Web.UI.Page
    20
    21 {
    22
    23
    24
    25 protected void Page_Load(object sender, EventArgs e)
    26
    27 {
    28
    29
    30
    31 }
    32
    33 [WebMethod]
    34
    35 public static String GetNowDate()
    36
    37 {
    38
    39 return "[{\"nowtime\":\"" + DateTime.Now.ToShortDateString() + "\"}]";
    40
    41 }
    42
    43 [WebMethod]
    44
    45 public static String GetOneDayLate(Int32 days)
    46
    47 {
    48
    49 return "[{\"nowtime\":\"" + DateTime.Now.AddDays(days).ToShortDateString() + "\"}]";
    50
    51 }
    52
    53 }
    54
    55 }

    注意点:

    (1) url的填写格式 url+"/method name"

    (2) contentType: "application/json; charset=utf-8", 这个必须要有

    (3) 返回数据的类型为json

    (4) data:"{days:1}",参数的传递

    (5)  后台的方法必须是public static 而且还要有 [WebMethod]特性修饰

  • 相关阅读:
    HDU 5265 pog loves szh II (二分查找)
    不删除记录的表CRUD的常见处置
    如果真的不知道将来要做什么
    爪哇国新游记之三十三----目录文件操作
    一个类似股票看板的自刷新页面的制作
    转载:什么才是程序员的核心竞争力
    又见The request sent by the client was syntactically incorrect ()
    uefi版和装机版有什么区别?
    Mealy和moore型状态机的主要区别
    FIFO、UART、ALE解释
  • 原文地址:https://www.cnblogs.com/zcttxs/p/2429174.html
Copyright © 2020-2023  润新知