如何使按钮触发AJAX调用

Question

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

输入文字后，我想点击按钮，以便制作AJAX。 AJAX调用将获取文本并在现有JSON文件上更新.JSON文件将被保存。这是我的目标，即拥有更新的JSON文件。

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

Answer 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);
});

希望它有所帮助。

Answer 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完成。

祝你好运！