AJAX向PHP文件提交了两个信息

Question

<button id='0' value="23" name='process'>Click 0</button>
<button id='1' value="45" name='process'>Click 1</button>
<button id='2' value="66" name='process'>Click 2</button>
<button id='3' value="88" name='process'>Click 3</button>
<button id='4' value="92" name='process'>Click 4</button>
$('#id').click(function(){
    $.ajax({
      url: "test.php",
      data: {0:123},
      processData: false,
      contentType: 'application/json'
    });
});

我对Ajax并不熟悉，但我想使用它来避免重新加载页面，这是我使用的PHP当前正在发生的事情。单击一个按钮时，我需要通过Ajax发送数据。每个按钮需要发送一个唯一的密钥（ID）和一个简单的数字值。

不确定Ajax如何完全通过单击发送唯一信息以及如何触发不同按钮的不同结果。

Answer 1

尝试这样的东西：

<button data-id='0' value="23" name='process'>Click 0</button>
<button data-id='1' value="45" name='process'>Click 1</button>
<button data-id='2' value="66" name='process'>Click 2</button>
<button data-id='3' value="88" name='process'>Click 3</button>
<button data-id='4' value="92" name='process'>Click 4</button>
$('button').on("click", function() {
    $btn = $(this),
    id = $btn.data("id"),
    value = $btn.val();
    $.ajax({
      url: "test.php",
      data: {
          id: id,
          value: value
      },
      processData: false,
      contentType: 'application/json',
      success: function(data) {
          console.log('Request successfull!', data);
      }
    });
});

1. $('button').on("click"这将将事件设置为所有按钮。使用on()代替click()。您还可以为这些按钮设置类，然后通过它选择它们，以防文档中的其他按钮不必执行此操作；

2. 使用data-属性将任何自定义数据存储到您的元素中，不要为此使用默认或不存在的属性。然后，您可以使用data();

获得它们

3. 在 data参数中的ajax请求中，将它们作为对象发送给对象。

4. 添加 success， error或 complete回调，以便尽快获得请求的结果。

更新：最终AJAX请求

$.ajax({
    type: "post",
    url: "test.php",
    data: {
        id: id,
        value: value
    },
    processData: false,
    success: function(data) {
        console.log('Request successfull!', data);
    }
});

Answer 2

请参阅下面的代码。我已经评论了Ajax调用，以便您可以看到控制台日志而不会出错。如果您不需要时，请在使用它并删除console.log()时进行输入。

$('button').on('click', function(){
  
  // First we get the values from the button that's clicked
  var val1 = $(this).attr('id');
  var val2 = $(this).val();
  
  //We then convert the values into JSON format
  var data = {"id":val1, "val":val2};
  
   console.log(data);
  //$.ajax({    
    //url: "test.php",
    //data: data,
    //dataType: "json",
    //processData: false,
    //contentType: 'application/json'
  //});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='0' value="23" name='process'>Click 0</button>
<button id='1' value="45" name='process'>Click 1</button>
<button id='2' value="66" name='process'>Click 2</button>
<button id='3' value="88" name='process'>Click 3</button>
<button id='4' value="92" name='process'>Click 4</button>

Answer 3

    <button id='23' class='process' name='process'>Click 0</button>
    <button id='45' class='process'  name='process'>Click 1</button>
    <button id='66' class='process'  name='process'>Click 2</button>
    <button id='88' class='process' name='process'>Click 3</button>
    <button id='92' class='process'  name='process'>Click 4</button>
    $('.process').click(function(){
        var uniqueVal = $(this).attr('id');
        $.ajax({
          url: "test.php",
          data: {'inputName':uniqueVal},
          type: 'POST',
           contentType: 'application/json; charset=utf-8',
          success: function (response) {
            //do what ever you want here
        },
        error: function () {
            alert("error");
        }
        });
    });
   In test.php
    <?php
       //access as follows
        echo $_POST['inputName'];
    ?>