javascript - 单击按钮发送 Ajax 调用并从 aspx.cs(代码隐藏)获取值到 aspx 页面并将其显示在同一页面的输入字段中

Question

我是 AJAX 的新手，遇到了一个问题，我想在单击按钮时发送 AJAX CALL，而单击按钮时，输入字段的值将发送到aspx.cs(代码隐藏)页面和响应应该是 get 的，我尝试向同一输入字段显示该响应，但它不起作用。

ASPX 代码:

<input type="text" class="wpcf7-text" id="d_id" name="d_id" runat="server"> // this id is sent to the Read_Driver_Account funtion and on response it is sending the driver cell number which i want to display in the driver cell number imput field
<input class="wpcf7-text" id="driver_cell" name="driver_cell" runat="server">
<asp:Button ID="btnn1" OnClick="Read_Driver_Account" runat="server"  Text="Get"/>
<script>
$("btnn1").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/Udate_Driver_Account/",   //Udate_Driver_Account.aspx file is placed in VisualStudio/Websites/Fp/Udate_Driver_Account.aspx, where Fp is name of my website.
            data: {
                id: $(this).val(), 
                driver_cell: $("#drivercel").val()
            },
            success: function (result) {
                alert('ok');
            },
            error: function (result) {
                alert('error');
            }
        });
    });

</script>

ASPX.CS 代码:

public string drivercel;

protected void Read_Driver_Account(object sender, EventArgs e)
{
var alldata = d_id.Value;
string driveradres = tokens[7];
string drivercel = tokens[8];  // i want to set this value to the input field id="driver_cell"
}

注意:tokens[8] 是来自实时数据库的值，它不是静态值；我还想为多个输入字段设置多个值。

Answer 1

您使用的 JQuery 选择器应该是 $("#btnn1") 而不是 $("btnn1")。那么ajax url应该是/pageName/webMethod，如/Udate_Driver_Account.aspx/Read_Driver_Account。

并使用 JSON.stringify 将数据发送为 data: JSON.stringify({ id: $(this).val(), driver_cell: $("#drivercel") .val() }).

添加 contentType: "application/json; charset=utf-8" 以 json 形式发送数据，并添加 dataType: "json" 以获取 json 形式的响应数据.

<input class="wpcf7-text" id="driver_cell" name="driver_cell" runat="server">
<asp:Button ID="btnn1" OnClick="Read_Driver_Account" runat="server"  Text="Get"/>
<script>
$("#btnn1").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/Udate_Driver_Account.aspx/Read_Driver_Account",   //Udate_Driver_Account.aspx file is placed in VisualStudio/Websites/Fp/Udate_Driver_Account.aspx, where Fp is name of my website.
            data: JSON.stringify({
                id: $(this).val(), 
                driver_cell: $("#drivercel").val()
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                alert(result);
                // $("#drivercel").val(result.d);
            },
            error: function (result) {
                alert('error');
            }
        });
    });

</script>

然后使用 WebMethod 属性标记您的方法，并将其设置为 public static ，参数名称与上面的数据 json 相同。

public string drivercel;

[System.Web.Services.WebMethod]
public static string Read_Driver_Account(string id, string driver_cell)
{
  string drivercel = tokens[8];  // i want to set this value to the input field id="driver_cell"
  return drivercel;
}

注意:当您直接在 JQuery 选择器中使用 asp:Button id 时，您应该添加 ClientIDMode="Static"如下所示为按钮添加 属性，以便在客户端使用相同的 id(或在 Page 指令中添加相同的 id)。否则，按钮将在客户端具有不同的动态 id，并且 JQuery 单击事件将不会被触发。

<asp:Button ID="btnn1" ClientIDMode="Static" OnClick="Read_Driver_Account" runat="server"  Text="Get"/>