Ajax将两条信息提交给php文件

时间:2017-10-03 12:55:46

标签: javascript php jquery ajax

<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完全按照每次点击发送独特的信息以及如何为不同的按钮触发不同的结果。

3 个答案:

答案 0 :(得分:6)

尝试这样的事情:

#include <iostream>
#include <algorithm>

int main()
{
    int a[5] = { 1, 2, 3, 4, 5 };
    size_t n = 3;

    int *b = new int[n];

    std::copy( a, a + n, b );

    for (size_t i = 0; i < n; i++ ) std::cout << b[i] << ' ';
    std::cout << std::endl;

    delete [] b;

    std::cin.get();

    return 0;
}
  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); } }); }); 这会将事件设置为所有按钮。使用on()代替click()。您还可以为这些按钮设置一个类,并通过它选择它们,以防您在文档中有其他按钮不必执行此操作;

  2. 使用$('button').on("click"属性将任何自定义数据存储到您的元素中,不要使用默认或不存在的属性。然后,您可以使用data();

  3. 获取它们
  4. 将它们作为data参数中的ajax请求中的对象发送。

  5. 添加data-successerror回调,以便在请求完成后立即获取结果。

  6. 更新:最终的Ajax请求

    complete

答案 1 :(得分:1)

请参阅下面的代码。我已经注释掉了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>

答案 2 :(得分:0)

    <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'];

    ?>