javascript - 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. 将它们作为 ajax 请求中的对象发送到data中。参数。

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