zoukankan      html  css  js  c++  java
  • Ajax请求本页

    近来我发现我一些同事,在用ajax时,用数据源,都喜欢重新新建一个页面.其实我是很不喜欢这种模式,主要原因,一是后期维护麻烦,还要去找哪些页面,二是不能调用一些本页原有的数据方法.因此我在这里做了一个测试的案例,在这里,我们有2种方法来掉用本页的数据源方法. 一种是webservice 方法. 那就是在本页里添加webservice 方法.如下

    [WebMethod]
    public static string GetWord(string arg)
    {
    return "调用 webService,值是"+arg; 
    }

    这样就可以在客户端,前掉调用该方法了.如下
    var sdata = "{arg:'" + $("#txtVal").val() + "'}";
    $.ajax({
    type: "POST",
    contentType: "application/json;utf-8",
    data: sdata,
    // dataType: "json",
    url: "Default.aspx/GetWord",
    success: function (msg) {
    // debugger;
    // var json = eval('(' + msg + ')');
    alert(msg.d);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    debugger;
    alert("ok");
    // 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
    // this; // 调用本次AJAX请求时传递的options参数
    }


    第二种是通过参数,来控制,是否调用数据源方法.
    后台代码如下:
    protected void Page_Load(object sender, EventArgs e)
    {
    string methor = Request["act"];
    if (!string.IsNullOrEmpty(methor))
    {
    this.GetType().GetMethod(methor).Invoke(this,null);

    }
    }
    public void GetVal()
    {
    string val = "getVal 方法获取参数" + Request["arg"];
    Response.Clear();
    Response.Write(val);
    Response.End();
    }
    这样也是一种好的数据源调用方法
    在前台代码如下:
    var data = new Object();
    data.act = "GetVal";
    data.arg = $("#txtVal").val();
    $.post("Default.aspx", data, function (data) { alert(data); });

    具体可以参考案例

    本来想把那项目,添加成附件的.但没找到那添加附件的方法,所以只能把代码全部copy出来
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Services;

    public partial class _Default : System.Web.UI.Page 
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    string methor = Request["act"];
    if (!string.IsNullOrEmpty(methor))
    {
    this.GetType().GetMethod(methor).Invoke(this,null);
    }
    }

    public void GetVal()
    {
    string val = "getVal 方法获取参数" + Request["arg"];
    Response.Clear();
    Response.Write(val);
    Response.End();
    }

    [WebMethod]
    public static string GetWord(string arg)
    {
    return "调用 webService,值是"+arg; 
    }

    }
    在前台,代码如下.只要引用jquery,就可以运行本代码了.
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!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 runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <title></title>
    <script>
    $(function () {

    $("#btnWebservices").click(function () {
    var sdata = "{arg:'" + $("#txtVal").val() + "'}";
    $.ajax({
    type: "POST",
    contentType: "application/json;utf-8",
    data: sdata,
    // dataType: "json",
    url: "Default.aspx/GetWord",
    success: function (msg) {
    // debugger;
    // var json = eval('(' + msg + ')');
    alert(msg.d);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    debugger;
    alert("ok");
    // 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
    // this; // 调用本次AJAX请求时传递的options参数
    }

    });
    });

    $("#btnPost").click(function () {
    var data = new Object();
    data.act = "GetVal";
    data.arg = $("#txtVal").val();

    $.post("Default.aspx", data, function (data) { alert(data); });

    });

    });

    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <input id="txtVal" /> <input type="button" id="btnWebservices" value="webserrvices 调用" />
    <input type="button" id="btnPost" value="post方法 调用" />
    </div>
    </form>
    </body>
    </html>

    引用于 http://tieba.baidu.com/p/1320194697

     

  • 相关阅读:
    结对编程1-基于GUI的四则运算生成器
    个人作业1——四则运算题目生成程序(基于控制台)
    软件工程的实践项目课程的自我目标
    个人作业3——个人总结(Alpha阶段)
    结对编程2——单元测试
    个人作业(2)---英语学习APP案例分析
    结对作业1----基于GUI的四则运算生成器
    个人作业1——四则运算题目生成程序(基于控制台)
    个人作业3——个人总结(Alpha阶段)
    结对编程2——单元测试
  • 原文地址:https://www.cnblogs.com/T--Y/p/3392388.html
Copyright © 2011-2022 走看看