如何让按钮触发 AJAX 调用答案

【问题标题】：How can I make a button trigger an AJAX call如何让按钮触发 AJAX 调用
【发布时间】：2014-01-15 21:48:49
【问题描述】：

我有一个文本框和一个按钮。

输入文本后，我想单击按钮以生成 AJAX。 AJAX 调用将获取文本并在现有 JSON 文件上对其进行更新。JSON 文件将被保存。这是我的目标，即拥有一个更新的 JSON 文件。

所以我的问题是我在正确的轨道上。我是 asp.net 的新手，想确认这些步骤是可行的。有没有更简单的点击触发 AJAX 调用的方法？

【问题讨论】：

如果您没有给我们任何可比较的东西，那么寻求更简单的方法是没有意义的。是的，可以这样做，但由于我不熟悉 asp，所以我不会对制作演示有太大帮助。
代码...你在哪里
您正在编写代码。只要您了解所使用系统的固有结构，任何事情都是可能的。

标签： javascript jquery asp.net ajax json

【解决方案1】：

我不确定你是否使用 asp.net 是否会有所不同，但这里有一个点击按钮触发 ajax 的示例。

var doAjax = function(inputValue) {
    $.ajax({
       url: '/mysever/page.asp', // .asp?
       type: 'POST'
       data: { value: inputValue },
       success: function( response ) {
          // do something with response
       }
    });
};

$('#myButton').click(function() {
    var fieldValue = $('#myInputField').val();
    doAjax(fieldValue);
});

希望对你有帮助。

【讨论】：

【解决方案2】：

您需要一个 onClick 事件来调用一个函数，该函数将获取（获取）您的字段值并将其推送到 AJAX 请求，如下所示：

function postValue() {

  // fetch the field value
  var val = $('#my_input').val();

  // verify the field was not empty
  if (val.length>0) {
    // setup post object
    var ajax_post = {myText : val};

    // EXECUTE AJAX 
    var jqxhr = $.ajax( {
       url  : 'save-values.php',
       type : 'POST',
       data : ajax_post
    })
    .done(function() {
        //alert( "success" );
    })
    .fail(function() {
        //alert( "error" );
    })
    .always(function() {
        //alert( "complete" );
    });

  } else {
    //alert( "error: please enter a value!" );
  }

}

然后将其附加到您的按钮上：

<button onClick="postValue();" value="Click Me!">

注意，这是使用 jQuery 完成的，但也可以使用 vanilla javascript 完成。

祝你好运！

【讨论】：