<script type="text/javascript">
function ajaxcall()
{
var namejs=document.getElementById("namejs").value;
var emailjs=document.getElementById("emailjs").value;
var passjs=document.getElementById("passjs").value;
var selected_gender=document.getElementById("selected_gender").value;
var div_id=document.getElementById("div_id").innerHTML;
var xmlhttp=new new XMLHttpRequest();
xmlhttp.open("GET","response_insert.php?name="+namejs+"&email="+emailjs+"&password="+passjs+"&gender="+selected_gender);
xmlhttp.send(null);
div_id=xmlhttp.responseText();
}
</script>
//Here my response_php page code written below
<?php
include "insert.php";
extract($_REQUEST);
mysql_connect("localhost","root","");
mysql_select_db("demo");
$name=$_GET["name"];
$email=$_GET["email"];
$password=$_GET["password"];
$gender=$_GET["gender"];
mysql_query("insert into tbl (name,email,password,gender) value ('$name','$email','$password','$gender')") or die("Data not inserted");
echo "Inserted Successfully";
?><!DOCTYPE html>
<html>
<head>
<title>Insert using Ajax,Jquery,Php,MySql</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="insert.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.form-control
{
width: 300px;
}
.s
{
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<form role="form" >
<div class="form-group">
<strong>Name</strong>
<input type="text" id="namejs" class="form-control" name="">
</div>
<div class="form-group">
<strong>Email</strong>
<input type="text" id="emailjs" class="form-control" name="">
</div>
<div class="form-group">
<strong>Password</strong>
<input type="password" class="form-control" id="passjs" name="">
</div>
<div class="form-group">
<strong>Gender</strong>
<select class="form-control s" id="selected_gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="form-group">
<button type="button" id="submitjs" onclick="ajaxcall()" class="btn btn-success">INSERT
</button>
</div>
</form>
</div>
<div id="div_id">
</div>
</body>
</html>
我想在不刷新整个页面的情况下将数据插入MySql数据库......这是我的代码..
我在javascript代码下面写了response_insert.php页面的代码.......... 有什么问题...... 我怎么能用Ajax和javascript和php
来做到这一点请给出答案........................................... ............................
答案 0 :(得分：0)
$.ajax({
url: 'response_insert.php',
type: 'get',
data: {
name: namejs,
email: emailjs,
password: passjs,
gender: selected_gender
}
success: function(response){
//do stuff
},
error: function(error){ console.log(error.responseText);}
});
<强>更新 首先，当您要插入数据时，您应该使用 POST 。查看get和post here之间的差异。所以你的ajax看起来就像那样：
$.ajax({
url: 'response_insert.php',
type: 'post',
dataType: 'json',
data: {
name: namejs,
email: emailjs,
password: passjs,
gender: selected_gender
}
success: function(response){
console.log(response); //here is response from your php
},
error: function(error){ console.log(error.responseText);}
});
<强> response_insert.php
<?php
include "insert.php";
$connection = mysqli_connect("localhost","root","");
$con = mysqli_connect("localhost", "root", "", "demo");
$name=$_POST["name"];
$email=$_POST["email"];
$password=$_POST["password"];
$gender=$_POST["gender"];
if(mysqli_query("insert into tbl (name,email,password,gender) values ('$name','$email','$password','$gender')"){ echo "inserted successfully"; }
else{ echo mysqli_error($con);}
?>
答案 1 :(得分：0)
我会使用jQuery进行AJAX调用。
function ajaxcall() {
var namejs = $("#namejs").val();
var emailjs = $("#emailjs").val();
var password = $("#passjs").val();
var selected_gender = $("#selected_gender").val();
$.ajax({
type: 'POST',
url: 'response_insert.php',
dataType: json,
data: {
name: namejs,
email: emailjs,
password: passjs,
gender: selected_gender
},
success: function(response) {
alert(response);
}
});
}
或者如果您不想使用JSON，可以将一些jQuery与纯JavaScript混合使用：
function ajaxcall() {
var namejs = $("#namejs").val();
var emailjs = $("#emailjs").val();
var password = $("#passjs").val();
var selected_gender = $("#selected_gender").val();
$.ajax({
type: 'POST',
url: 'response_insert.php',
data: "name=" + namejs + "&email=" + emailjs + "&password=" + passjs + "&gender=" + selected_gender,
success: function(response) {
alert(response);
}
});
}
你的response_insert.php：
<?php
function clean_data($data){ // sanitizes inputs
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
// need to decode JSON, if you don't use JSON just pass the $_POST to clean_data()
$name_dirty = json_decode($_POST['name']);
$email_dirty = json_decode($_POST['email']);
$password_dirty = json_decode($_POST['password']);
$gender_dirty = json_decode($_POST['gender']);
// takes parameters from AJAX call and passes them to clean_data() for sanitization
$name = clean_data($name_dirty);
$email = clean_data($email_dirty);
$password = clean_data($password_dirty);
$gender = clean_data($gender_dirty);
// MySQL portion
$conn = mysqli_connect("localhost", "root", "");
$query = "INSERT INTO database.tbl (name,email,password,gender) VALUES ('$name','$email','$password','$gender')";
$result = mysqli_query($conn, $query);
if($result) {
echo $result; // or whatever you want
} else {
"Something went wrong."
}
?>