Здесь у меня есть 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 () для декодирования
Таким образом вы можете:
декодировать его на стороне клиента с ответом 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"); } }); });