Jquery Ajax提交表单_Jquery_Ajax_Forms_Submit

Jquery Ajax提交表单

jquery ajax forms

Jquery Ajax提交表单,jquery,ajax,forms,submit,Jquery,Ajax,Forms,Submit,我有“创建房间”表格： <div class="contentHolder"> <div class="row no-margin"> <div class="col-sm-offset-3 col-sm-6 col-xs-12"> <g:form action="save" controller="roomLocation"> <

我有“创建房间”表格：

<div class="contentHolder">
        <div class="row no-margin">
            <div class="col-sm-offset-3 col-sm-6 col-xs-12">
                <g:form action="save" controller="roomLocation">
                    <g:render template="form" model="[roomLocation:roomLocation]"/>
                    <div class="row form-row">
                        <div class="col-md-offset-8 col-md-4 col-xs-12">
                            <div class="form-buttons">
                                <g:submitButton name="create" style="width:100%" class="btn btn-purple" value="Create" />
                            </div>
                        </div>
                    </div>
                </g:form>
            </div>
        </div>
    </div>

这使得输入的形式：

<div class="row form-row required">
    <label class="labelStyle col-md-4 text-align-xs">Location</label>
    <div class="col-md-8">
        <input id="inputName" placeholder="Location" class="form-control" name="name" value="${roomLocation?.name}" required>
    </div>
</div>


位置

正如您在第一个表单上看到的，subbmision是通过按钮create完成的，但是整个页面都被刷新了，我想使用ajax，以便在不刷新整个页面的情况下完成提交。我是新来的，如果您能提供帮助，我将不胜感激。

不刷新页面和提交表单的jquery代码是

 $(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contact").val();
var gender = $("input[type=radio]:checked").val();
var msg = $("#msg").val();
if (name == '' || email == '' || contact == '' || gender == '' || msg == '') {
alert("Insertion Failed Some Fields are Blank....!!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("refreshform.php", {
name1: name,
email1: email,
contact1: contact,
gender1: gender,
msg1: msg
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});

假设这是您的html页面

<html>
<head>
<title>Submit Form Without Refreshing Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
<script src="js/refreshform.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Without Refreshing Page</h2>
<!-- Required Div Starts Here -->
<form id="form" name="form">
<h3>Fill Your Information!</h3>
<label>Name:</label>
<input id="name" placeholder="Your Name" type="text">
<label>Email:</label>
<input id="email" placeholder="Your Email" type="text">
<label>Contact No.</label>
<input id="contact" placeholder="Your Mobile No." type="text">
<label>Gender:</label>
<input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female
<label>Message:</label>
<textarea id="msg" placeholder="Your message..">
</textarea>
<input id="submit" type="button" value="Submit">
</form>
</div>
</body>
</html>


提交表单而不刷新页面
提交表单而不刷新页面
填写您的信息！
姓名：
电邮：
联络电话。
性别：
男性
女性
信息：

如果您在服务器端使用php，那么

<?php
// Establishing connection with server by passing "server_name", "user_id", "password".
$connection = mysql_connect("localhost", "root", "");
// Selecting Database by passing "database_name" and above connection variable.
$db = mysql_select_db("mydba", $connection);
$name2=$_POST['name1']; // Fetching Values from URL
$email2=$_POST['email1'];
$contact2=$_POST['contact1'];
$gender2=$_POST['gender1'];
$msg2=$_POST['msg1'];
$query = mysql_query("insert into form_element(name, email, contact, gender, message) values ('$name2','$email2','$contact2','$gender2','$msg2')"); //Insert query
if($query){
echo "Data Submitted succesfully";
}
mysql_close($connection); // Connection Closed.
?>

好吧……tanx寻求帮助……但我在任何情况下都不使用php，我用groovy语言执行“保存”操作，并通过该操作将数据保存在数据库中，后端代码将有所不同，但前端不会更改；您可以动态生成响应，或者如果您使用，那么您也可以使用c标记进行迭代。。。您必须使用action=“/save”或任何