为什么我无法使用JQuery和PHP将数据提交到我的数据库以及为什么我的页面会重定向到主页?

时间:2017-06-20 07:58:28

标签: javascript php jquery mysql ajax

我编写了以下代码来检索HTML表单中的数据,以便使用Jquery和AJAX将数据保存到数据库中,并在后端使用PHP将数据保存到我的SQL数据库中。但它不断重定向到主页而不做任何事情。我想提到的另一件事是通过jquery load()函数点击一个按钮加载表单。我对JQuery,PHP和AJAX都很陌生,请考虑一下,一个简单的答案将会非常感激。

$("#form1").submit(function(event){
		event.preventDefault();
		var name = $("#dname").val();
		var email = $("#email").val();
		var number = $("#num").val();
		var group = $("#grp").val();
		var location = $("#loc").val();
		var dataString = 'name='+ name + '&email='+ email +'&number=' +number +'&group='+ group + '&location='+ location;
		$.ajax({
			type: "POST",
			url: "formsubmit.php",
			data: dataString,
			cache: false,
			success: function(result){
				alert(result);
			}
		});
	});
   

 <form id="form1" style="border:1px solid #ccc">
    	<div class="container">
    			<label><b>Name</b></label>
    			<input type="text" placeholder="Enter Name" name="name" id="dname" required="required"/>
    			<br>
    			<label><b>Email</b></label>
    			<input type="email" placeholder="Enter Email" name="email" id="email" required="required"/>
    			<br>
    			<div id="checkmobile">
    					<input type="checkbox" checked="checked" id="cbx"> Share my mobile number
    			</div>
    			<br>
    			<div id="mobile">
    			  <label><b>Mobile number/Contact information</b></label>
    			  <input type="text" placeholder="Enter a 10 digit valid mobile number" id="num" name="number"/>
    			</div>
    			<div id="group" name="group">
    					<label><b>Select a Blood Group :</b></label>
    					<select name="group" id="grp" required>
    						<option value="A+">A+</option>
    						<option value="A-">A-</option>
							<option value="B+">B+</option>
   							<option value="B-">B-</option>
    						<option value="AB+">AB+</option>
    						<option value="AB-">AB-</option>
    						<option value="O+">O+</option>
    						<option value="O-">O-</option>
    					</select>
    					<br>
    					<label><b>Select a Location : ( Incase you're not finding the exact town/village , choose the nearest city )</b></label>
    					<select name="location" id="loc" required>
    						<option value="Kolkata">Kolkata</option>
    						<option value="Asansol">Asansol</option>
    					</select>
    			     </div>
    				<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
    				<div class="clearfix">
    					<button type="button" class="cancelbtn">Cancel</button>
    					<button type="submit" class="signupbtn" id="signupbtn">Sign Up</button>
    				</div>
    			</div>
    		</form>

the formsubmit.php file

<?php
$connection = mysql_connect("localhost"); // Establishing Connection with Server..
if(!$connection)
	die("Error connecting Database!");
$db = mysql_select_db("donor", $connection); // Selecting Database
if(!$db)
	die("Error Connecting Database");
//Fetching Values from URL
$name=sanitize($_POST['name']);
$mail=sanitize($_POST['email']);
$no=sanitize($_POST['number']);
$location=sanitize($_POST['location']);
$group=sanitize($_POST['group']);
//Insert query
$query = mysql_query('INSERT INTO tabledonor (Name,Email,Contact,Location,Blood Group) VALUES ($name,$mail,$no,$location,$group)');
if(query)
	echo "Donor Information Submitted Succesfully";
else
	echo "Error Submitting Informations";
mysql_close($connection); // Connection Closed

function sanitize($string) {
    return stripslashes(htmlentities(mysql_real_escape_string($string)));
}
?>

1 个答案:

答案 0 :(得分:1)

请阅读文档http://api.jquery.com/jquery.ajax/

据我所知,如果你发送的帖子数据必须是一个对象, 要发送到服务器的数据。如果不是字符串,它将转换为查询字符串。它附加到GET请求的URL。请参阅processData选项以防止此自动处理。对象必须是键/值对。如果value是一个数组,jQuery会根据传统设置的值

使用相同的键序列化多个值
$("#form1").submit(function(event){
        event.preventDefault();
        var name = $("#dname").val();
        var email = $("#email").val();
        var number = $("#num").val();
        var group = $("#grp").val();
        var location = $("#loc").val();
        var dataobj = {
         'name' : name , 
         'email' : email ,
         'number' number  ,
         'group' : group ,
         'location' : location
        };
        $.ajax({
            type: "POST",
            url: "formsubmit.php",
            data: dataobj,
            cache: false,
            success: function(result){
                alert(result);
            }
        });
    });