2014-01-31 3 views
0

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

<?php 
include 'dbconnect.php'; 

if (isset($_POST['lname']) && isset($_POST['fname'])){ 
$ln = $_POST['lname']; 
$fn = $_POST['fname']; 
    $sql = "INSERT INTO user_tbl (`lastname`,`firstname`) VALUES ('$ln','$fn')"; 
    $result = mysql_query($sql); 
} 
?> 

<!DOCTYPE html> 
<html> 
<head> 
    <script >var frm = $('#nameFrm'); 
      frm.submit(function (ev) { 
       $.ajax({ 
        type: frm.attr('method'), 
        url: frm.attr('action'), 
        data: frm.serialize(), 
        success: function (data) { 
         alert('ok'); 
        } 
       }); 

       ev.preventDefault(); 
      }); 
    </script> 
</head> 
<body> 
    <form id = "nameFrm" name = "frmName" method = "POST" > 
     Last Name : <input type = "text" name = "lname"><br /> 
     First Name: <input type = "text" name = "fname"><br /> 
     <input type = "submit" value = "submit" name= "subbtn" > 
    </form> 
</body> 

мой сценарий не работает этот сценарий, предполагает, чтобы избежать страниц от перегрузки и я уверен, что это перегрузочный каждой страница отсылается

также, когда я отделить код PHP

if (isset($_POST['lname']) && isset($_POST['fname'])){ 
$ln = $_POST['lname']; 
$fn = $_POST['fname']; 
$sql = "INSERT INTO user_tbl (`lastname`,`firstname`) VALUES ('$ln','$fn')"; 
$result = mysql_query($sql); 
} 

он по-прежнему перенаправляет его в новый файл php

+2

[** Пожалуйста, не используйте 'mysql_ *' функции в новом коде **] (http://bit.ly/phpmsql). Они больше не поддерживаются [и официально устарели] (http://j.mp/XqV7Lp). См. [** красное поле **] (http://j.mp/Te9zIL)? Узнайте о [* подготовленных операторах *] (http://j.mp/T9hLWi) и используйте [PDO] (http://php.net/pdo) или [MySQLi] (http://php.net/ mysqli) - [эта статья] (http://j.mp/QEx8IB) поможет вам решить, какой из них. Если вы выберете PDO, [здесь хороший учебник] (http://j.mp/PoWehJ). – MackieeE

ответ

0

Что нужно сделать, это создать новый файл с именем requests.php/или что-то

в этом файле есть переключатель заявление ..

requests.php

<?php 
if(isset($_POST['action']) && ($_POST['action']!='')){ 

    $action = $_POST['action']; 
    switch($action){ 
    case "submitForm" : 
     include 'dbconnect.php'; 
     if ((isset($_POST['lname'])) && (isset($_POST['fname']))){ 
      $ln = mysql_real_escape_string($_POST['lname']); 
      $fn = mysql_real_escape_string($_POST['fname']); 
      $sql = "INSERT INTO user_tbl (`lastname`,`firstname`) VALUES ('$ln','$fn')"; 
      mysql_query($sql); 
      echo "New values updated: ".$fn." ".$ln; 
     } 
    break; 
    } 

} 
?> 

Затем скопируйте этот сырой HTML ..

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 

    jQuery("#nameFrm").submit(function (e) { 
     e.preventDefault(); 
     var frm = jQuery('#nameFrm'); 
     var outPut = jQuery('#results'); 
     var loadImg = jQuery('#loadingImage'); 

     var fname = jQuery('#fname').val(); 
     var lname = jQuery('#lname').val(); 

     jQuery.ajax({ 
      type: 'POST', 
       data:'action=submitForm&fname='+fname+'&lname='+lname, 
       url: 'requests.php', 
       beforeSend: function(){ 
       loadImg.show(); 
       }, 
       complete: function(){ 
       loadImg.hide(); 
       }, 
      success: function(data) { 
       frm.hide(); 
       outPut.html(data); 
      } 
      }); 
    }); 

}); 
</script> 
</head> 
<body> 
    <form action="requests.php" id="nameFrm" name="frmName" method="POST" > 
     Last Name : <input type="text" id="lname" name="lname"><br /> 
     First Name: <input type="text" id="fname" name="fname"><br /> 
     <input type = "submit" value = "submit" name= "subbtn" > 
    </form> 
    <div id="loadingImage" style="display:none; text-align:center;"> 
     <img src="http://craigmaslowski.com/images/activity-indicator.gif" /> 
    </div> 
    <div id="results"></div> 
</body> 

Что его делает, при нажатии на кнопку отправки, JQuery будет срабатывать, будет захватывать 2 значения из Fname & LName (они были даны идентификатор) 2 значения будут добавлены в URL-адрес jquery.ajax, этот URL-адрес будет действительным URL-адресом формы, который для этого будет request.php

в запросах.php значения 2 столбца передаются и обрабатываются, вывод будет отправлен обратно на исходную страницу, будут ли данные переданы в результаты div #, чтобы показать результат ....

Также я добавил несколько других вещей, как погрузочные изображения, как для вызова beforeSend и Complete,

** ТАКЖЕ, пожалуйста, знай, что вы действительно должны думать о переходе от использования синтаксиса mysql_query к mysqli_query .. посмотрите комментарий MackieeE! **

поиграйте с ним вокруг .. надеюсь, его то, что ищете .. Удачи ..

Marty

+0

Я сделал это, и он поменялся undefined как для firstname, так и для lastname, хотя он остался на той же странице, что увидит, что делает его неопределенным. – user3235394

+0

ОК, я получил его, работая thx – user3235394

+0

SUperb ,,, также используя подобные инструменты для создания хромов. может видеть запросы xjax, которые передаются, и где его передать, вместе с возвращаемыми данными или если firefox, использовать firebug, чтобы посмотреть :) – Marty

0

Браузер выполняет javascript ПЕРЕД тем, как знать форму. Помещенный JavaScript ПОСЛЕ виде или в $ (окна) .load():

<script> 
    $(window).load(function() { 

     var frm = $('#nameFrm'); 
     frm.submit(function (ev) { 
      $.ajax({ 
       type: frm.attr('method'), 
       url: frm.attr('action'), 
       data: frm.serialize(), 
       success: function (data) { 
        alert('ok'); 
       } 
      }); 

      ev.preventDefault(); 
     }); 
    }); 
</script> 
Смежные вопросы