Получить множество значений с помощью ajax из get in php

Здесь у меня есть 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"/> ) Как я могу это сделать?

Вы можете создать более общую функцию 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 будет работать, и вы можете добавить больше похожих форм на более поздний срок, если вам нужно.

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

Выполните запрос GET в файле retrieve.php и поставьте url с переменным вводом со значением строки. Полученные данные затем будут отражаться на div #feedback .

Используйте JSON-нотацию для вашего ответа, это прекрасный способ представления данных

На стороне PHP вы используете json_encode () для кодирования объекта в JSON

На стороне javascript вы используете JSON.parse () для декодирования

Таким образом вы можете:

  1. добавить несколько значений в массив или объект на стороне сервера в PHP
  2. кодировать упомянутый объект
  3. декодировать его на стороне клиента с ответом 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/