Question

我有这个html示例表单，我需要提交到MySQL表而不必刷新页面。基本上，主要思想是在发送数据后将用户名值保留在输入字段中。我一直在努力尝试使用Ajax和JQuery函数来实现我的目标，但我无法做到正确，这就是为什么我只发布这段HTML代码，我开放给想法，如果可以请提供一些代码。非常感谢你。

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <form method="post" name="form">
            name:<input id="name" name="name" type="text" />
            <select id="gender" name="gender"> 
                <option value="">Gender</option>
                <option value="1">Male</option>
                <option value="2">Female</option>
            </select>
            <input type="submit" value="Submit" class="submit"/>
        </form>
    </body>
</html>

在我的php文件中：

<?php

$dbhost = 'localhost';
$dbuser = 'Myuser';
$dbpass = 'Mypass';
$db = 'Mydb';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);

$name = $_POST['name'];
$gender = $_POST['gender'];

mysql_query("INSERT INTO callWrapper ('user','data')
        VALUES ('$name','$gender'") or die(mysql_error());

?>

Answer 1

在jQuery中使用event.preventDefault()：

$("form").submit(e) {
  e.preventDefault();
  // the rest of your code
}

有关详细信息，请参阅here。

如果您不想使用jQuery，可以这样做：

<form onsubmit="myFormFunction();return false">

请记住这些与here

所解释的略有不同

Answer 2

HTML：

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <form method="post" name="form" id="frm_data">
            name:<input id="name" name="name" type="text" />
            <select id="gender" name="gender"> 
                <option value="">Gender</option>
                <option value="1">Male</option>
                <option value="2">Female</option>
            </select>
            <input type="button" value="Submit" class="submit" id="btn_submitForm"/>
        </form>
    </body>
</html>

JS：

// bind click event 
$('#btn_submitForm').click(function(e){
    e.preventDefault();

    var url = 'Your PHP File URL';
    var formData = $("#frm_data").serializeObject();

    $.post(url, formData,
        function(data) {
             //alert(data);
        }
    );
});

Answer 3

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
           $("#frm_data").submit(function(){
            $.ajax({
                type: "POST", // data send format POST/GET
                url: "./process_form.php", // file url for data processing 
                data:  $("#frm_data").serialize(), // all form field are serialize  
                dataType: "json", // response type xml, json, script, text, htm
                success: function(data) {
                    alert('hi');
                }
            });
           });            
        });
        </script>
    </head>
    <body>
        <form method="post" name="form" id="frm_data" onsubmit="return false;">
            name:<input id="name" name="name" type="text" />
            <select id="gender" name="gender"> 
                <option value="">Gender</option>
                <option value="1">Male</option>
                <option value="2">Female</option>
            </select>
            <input type="submit" value="Submit" class="submit" id="btn_submitForm"/>
        </form>
    </body>
</html>

for the reference  check the url : http://api.jquery.com/jquery.post/

如何在不重新加载页面的情况下提交表单

3 个答案: