提交表格而无需重新加载

Question

I got this simple form page that will submit the last name and first name of a user 我得到了一个简单的表单页面，该页面将提交用户的姓氏和名字

<?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>

my script does not work that script is suppose to avoid the page from reloading and i am pretty sure that it is reloading everytime the page is submitted 我的脚本不起作用，该脚本是为避免重新加载页面而设计的，我很确定每次提交页面时它都会重新加载

also when i seperate the php code 当我分开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);
}

it still redirects it to the new php file 它仍然将其重定向到新的php文件

Answer 1

The browser executes the javascript BEFORE knowing the form. 浏览器在知道表单之前执行javascript。 Put the javascript AFTER the form or into a $(window).load(): 将JavaScript放在表单后或$（window）.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>

Answer 2

What to do is create a new file called requests.php / or whatever 要做的是创建一个名为request.php /的新文件

in this file have a switch statement.. 该文件中有一个switch语句。

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;
   }

}
?>

Then copy this crude html.. 然后复制此原始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>

What its doing is when you click the submit button, the jquery will fire, it will grab the 2 values from fname & lname (these have been given an id) the 2 values will then be added to the jquery.ajax URL, this url will be the form action url, which for this is requests.php 它的作用是，当您单击“提交”按钮时，jQuery将触发，它将从fname和lname（已为其指定ID）中获取2个值，然后将这2个值添加到jquery.ajax URL中，该URL将是表单操作网址，为此是request.php

in requests.php the 2 post values are passed over and processed, the output will be sent back to the original page, were the data will be passed to the div#results, to show the output.... 在request.php中，传递并处理了2个post值，输出将被发送回原始页面，数据将被传递至div＃results，以显示输出。...

Also I've added a few other things, like a loading image, for both the beforeSend call and Complete, 另外，我还为beforeSend调用和Complete添加了其他一些东西，例如加载图像，

**ALSO, please be-aware that you should really think about moving from using the mysql_query syntax to mysqli_query.. have a look at MackieeE's comment! **还请注意，您应该真正考虑从使用mysql_query语法转换为mysqli_query的问题。请看一下MackieeE的评论！ ** **

Have a play around with it.. hopefully its what your looking for.. Good luck.. 玩一玩..希望它是您想要的..祝您好运..

Marty 马蒂

提交表格而无需重新加载

问题描述

2 个解决方案

解决方案1
0 2014-01-31 11:22:46

解决方案2
0 已采纳 2014-01-31 11:48:07

提交表格而无需重新加载

问题描述

2 个解决方案

解决方案1 0 2014-01-31 11:22:46

解决方案2 0 已采纳 2014-01-31 11:48:07

解决方案1
0 2014-01-31 11:22:46

解决方案2
0 已采纳 2014-01-31 11:48:07