Question

这里我有3个文件ajax.js，index.php和retrieve.php。

$('#button').click(function(){
   var string=$('#string').val();
   $.get('php/retrieve.php',{input: string} ,function(data){ 
       $('#feedback').text(data);                           
   }); 
});

的index.php

<html lang="fr">
<head><title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>


    <input id="string" type="text" name="string"/><input id="button" type="button" value="Go"/>
    <input id="string2" type="text" name="string"/><input id="button2" type="button" value="Go"/>
    <div id="feedback"></div>
    <div id="feedback2"></div>

    <script type="text/javascript" src="js/jquery-2.1.4.js"></script> 
    <script type="text/javascript" src="js/ajax.js"></script>
</body>
</html>

retrieve.php

<?php
    if(isset($_GET['input'])){
        $string=$_GET['input'];
        echo strrev($string);
    }
?>

在retrieve.php中，我从ajax.js中检索输入值。 ajax.js从index.php中检索值。但这只是它检索一个值（来自<input id="string" type="text" name="string"/>）我想从index.php中检索许多值（例如<input id="button2" type="button" value="Go"/>）我怎么能这样做？

Answer 1

您可以创建一个更通用的jQuery函数，它可以在两种情况下都有效。首先，让我们更正您的HTML，以包含正确的表单标记和输入的正确命名：

<html lang="fr">
<head><title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

    <form name="myForm" action="retrieve.php">
        <input id="string" type="text" name="string1"/>
        <input id="button" type="button" value="Go"/>
        <input id="string2" type="text" name="string2"/>
        <input id="button2" type="button" value="Go"/>
    </form>
    <div id="feedback"></div>
    <div id="feedback2"></div>

    <script type="text/javascript" src="js/jquery-2.1.4.js"></script> 
    <script type="text/javascript" src="js/ajax.js"></script>
</body>
</html>

现在您可以使用一个功能来处理任一按钮：

$('[type="button"]').click(function(){
   var currentinput = $(this).prev('input').attr('name'); // string1 or string 2
   var string = $(this).prev('input').val();
   $.get('php/retrieve.php',{input: string} ,function(data){
       if('string1' == currentInput) {
           $('#feedback').text(data);
       } else {
           $('#feedback2').text(data);
       }                           
   }); 
});

您可能希望每个表单只有一个按钮，因此您应该将表单分开，每个表单都有自己的输入。即便如此，上面的jQuery也可以运行，如果需要，您可以在以后添加更多类似的表单。

Answer 2

对您的回复使用JSON表示法，这是一种表达数据的漂亮方式

在PHP端，您使用json_encode()将对象编码为JSON

在javascript方面，您使用JSON.parse()进行解码

这样你就可以：

在PHP
编码所述对象

使用ajax响应对客户端进行解码

$.get('php/retrieve.php',{input: string} ,function(data){ 
    var response = JSON.parse(data);
}

要检索多个输入，我建议将它们组合在Form：

首先在带有提交按钮的表单中嵌入您的输入，您也不应该使用相同的name两次，因为它现在不起作用，创建唯一的名称

<form action="GET" id="myForm">
  <input id="string" type="text" name="string" />
  <input id="button" type="button" value="Go" />
  <input id="string2" type="text" name="string" />
  <input id="button2" type="button" value="Go" />
  <input type="submit" value="Go" />
</form>

并编写代码以提交ajax方式

$('#myForm').submit(function(event) {


  // Stop form from submitting normally
  event.preventDefault();

  var $form = $(this);

  $.ajax({
    type: "GET",
    url: "retrieve.php",
    data: $form.serialize(),
    success: function() {
      console.log("it worked");
    }
  });

});

https://jsfiddle.net/c3mhjozc/1/

Answer 3

$('#button').click(function(){
var string=$('#string').val();
   $.ajax({
      type:"GET",
      url: "php/retrieve.php?input=" + string,
      dataType: "html"
   }).done(function(data){
      $('#feedback').html(data);
   });
});

在retrieve.php中执行GET请求，并为url提供带有字符串值的变量输入。然后，检索到的数据将反映在#feedback div。

上

从get in php中使用ajax检索许多值

3 个答案: