2013-08-25 2 views
2

Я пробую простой запрос ajax, который не нуждается в обновлении страницы при отправке. Но я думаю, что я сделал это неправильно. Любая помощь приветствуется.PHP, как формировать submit, используя ajax

HTML/JS PAGE

<script> 
    $(function() { 
     $('form#person').on('submit', function(e) { 
      $.ajax({ 
       type: 'post', 
       url: 'addAPerson.php', 
       data: $(this).serialize(), 
       success: function (o) { 
          =====> console.log(o); <=== I TRIED DOING THIS BUT NOTHING IS PRINTED 
        alert('MUST ALERT TO DETERMINE SUCCESS PAGE'); 
       } 
      }); 
      e.preventDefault(); 
     }); 
    });  
</script> 

<form id="person" action="addAPerson.php" method="post"> 
    Firstname: <input name="fname" /> 
    Lastname: <input name="lname" /> 
    <input type="reset" style="float:right"name="cancel" value="cancel"/> 
    <input type="submit" name="submit" value="save"/> 
</form> 

addAPerson.php

<?php 
    $fname = $_POST['fname']; 
    $lname =$_POST['lname']; 
    $con = mysql_connect("localhost","root",""); 
    mysql_select_db("person",$con); 
    $sql = "INSERT INTO person(firstname, lastname) VALUES('$fname', '$lname')"; 

    mysql_close(); 
?> 
+1

С одной стороны, это '<имя входного =«имя_файла»/>' должен быть изменен на '<входной тип =«текст»название =«имя_файла»/>' и сделать то же самое другой. –

+0

@ Fred-ii- 'type =" text "' является значением по умолчанию. – Barmar

+0

@ Бармар О, я этого не знал до сих пор. Спасибо за дополнительную информацию, помните об этом. (назовите это привычкой) ;-) –

ответ

1

, если у вас есть более одной формы на странице, вам необходимо изменить:

$('form').serialize(), 

до:

$(this).serialize(), 

В противном случае он будет включать поля из всех форм в параметры этого сценария.

Я бы также рекомендовал, чтобы PHP эхо-то указывал, было ли это успешным или нет, что может показать функция успеха AJAX.

Вы также должны дезинфицировать входы сценария и преобразовать из функций mysql_xxx в mysqli_xxx или PDO, предпочтительно используя параметризованные запросы.

+0

Спасибо за такую ​​небольшую ошибку, но .. Моя единственная проблема в том, что моя форма была успешно отправлена, но данных там нет. Мне все еще нужно обновить страницу, чтобы увидеть вставленные данные. Любая рекомендация? Спасибо –

+0

Вам нужно поместить код в функцию 'success', которая обновляет DOM для отображения новых данных. В представлении традиционной формы это произойдет потому, что перезагружает страницу, но вам нужно явно ее кодировать при использовании AJAX. – Barmar

+0

Я попытался использовать console.log() 'o', но ничего не печатал. Извините, я все еще новичок в запросе ajax. Спасибо за помощь. –

0

Следующий мой тест основан на ваших кодах. У меня есть несколько модификаций. Во-первых, я поместил ссылку jQuery и добавлю «type» в каждое текстовое поле.

<html> 
<head> 
    <script src="./jquery-1.9.1.min.js"></script> 
    <script> 
     $(function() { 
      $('form#person').on('submit', function(e) { 
       $.ajax({ 
        type: 'post', 
        url: 'test.php', 
        data: $('form').serialize(), 
        success: function() { 
         alert('MUST ALERT TO DETERMINE SUCCESS PAGE'); 
        } 
       }); 
       e.preventDefault(); 
      }); 
     });  
    </script> 
</head> 
<body> 
<form id="person" method="post"> 
    Firstname: <input name="fname" type="text" /> 
    Lastname: <input name="lname" type="text" /> 
    <input type="reset" style="float:right"name="cancel" value="cancel"/> 
    <input type="submit" name="submit" value="save" /> 
</form> 
</body> 

Это PHP-код. Вместо wirting в базу данных я просто эхо-строку. Я вижу предупреждение, когда я нажимаю кнопку «Сохранить», не обновляя страницу.

<?php echo "success"; ?> 

Вот альтернатива для вашего требования. Они предоставляют исходный код, который вы можете загрузить и протестировать на локальном компьютере.

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

+0

Спасибо за помощь :) –

Смежные вопросы