我试图通过 javaScript 文件将用户信息链接到 .php 文件，将用户信息输入数据库，它会抛出“意外的 token <”，但是当我直接将操作作为 .php 给出时，它的工作正常，我认为问题出在 .js 上文件包含，请帮我解决这个问题。如果我错了，请原谅..!!
.html
<form id="form" name = "form" method = "POST" action="form_banking1.php" class="wizard-big" autocomplete = "off" enctype="multipart/form-data">
<!--<h1>Please fill the below details</h1>-->
<fieldset>
<!--<h2>Account Information</h2>-->
<div class="row">
<div class="col-sm-12 form-group">
<input type="text" placeholder="Current address" class="form-control required" id="ca" name="ca" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="House no" class="form-control required" id="hno" name="hno" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Road no" class="form-control required" id="rno" name="rno" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Location" class="form-control required" id="location" name="location" required="">
</div>
<div class="col-sm-3 form-group">
<select type="text" class="form-control required" name="country" required="">
<option value="">Country</option>
<option value="1">India</option>
</select>
</div>
<div class="col-sm-3 form-group">
<select type="text" class="form-control required" id="state" name="state" required="">
<option value="">State</option>
<option value="1">Karnataka</option>
. </select>
</div>
<div class="col-sm-3 form-group">
<select type="text" class="form-control required" id="city" name="city" required="">
<option value="">City</option>
<option value="1">Bengaluru</option>
</select>
</div>
<div class="col-sm-3 form-group">
<input type="text" placeholder="Pin no" class="form-control required" id="pin" name="pin" required="">
</div>
<div class="col-sm-12 form-group">
<select type="text" class="form-control required" id="doctitle" name="doctitle" required="">
<option value="">Document Title</option>
<option value="1">Aadhar Card</option>
<option value="2">Pan Card</option>
<option value="3">Ration Card</option>
<option value="4">Green Card</option>
<option value="5">Social Security Card</option>
<option value="6">Voter ID</option>
<option value="7">Driving License</option>
<option value="8">Add New</option>
</select>
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Document no" class="form-control required" id="docno" name="docno" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Issued Authority" class="form-control required" id="ia" name="ia" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Date of Expiry" class="form-control required" id="doe" name="doe" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Passport no" class="form-control required" id="pno" name="pno" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Issued Authority" class="form-control required" id="pissuedby" name="pissuedby" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Date of Expiry" class="form-control required" id="pdoe" name="pdoe" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Visa no" class="form-control required" id="vno" name="vno" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Issued Authority" class="form-control required" id="vissuedby" name="vissuedby" required="">
</div>
<div class="col-sm-4 form-group">
<input type="text" placeholder="Date of Expiry" class="form-control required" id="vdoe" name="vdoe" required="">
</div>
<div class="col-sm-4 form-group">
<input class="form-control " type="file" name = "doc" id = "doc" required="">
</div>
<div class="col-sm-4 form-group">
<input style="width:100%" type="submit" name = "submit" id = "submit" value = "Save" class="btn btn-success">
</div><!--==== End col-sm-4 form-group==-->
</div>
<div class="col-lg-4">
<div class="text-center">
<div style="margin-top: 20px">
<i class="" style="font-size: 180px;color: #e5e5e5 "></i>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
.js
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
var status = $('form')[0].checkValidity();
if(status){
var formData = new FormData($('form')[0]);
$.ajax({
url: "form_citizenship.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
async: false,
dataType: "JSON",
success: function(json){
if(json.error){
alert(json.error_msg);
}else{
alert(json.docno);
}
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
}
});
});
.php
<?php
session_start();
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','miisky');
$response = array();
$con = mysqli_connect(HOST,USER,PASS,DB) or die('Unable to Connect');
if(!mysqli_connect_errno()){
$error_flag = false;
/*foreach($_POST as $value){
if(empty($value)){
$error_flag = true;
break;
}
}*/
if(!$error_flag){
//receiving post parameters
$ca =$_POST['ca'];
$hno = trim($_POST['hno']);
$rno = trim($_POST['rno']);
$location = trim($_POST['location']);
$country = trim($_POST['country']);
$state = trim($_POST['state']);
$city = trim($_POST['city']);
$pin = trim($_POST['pin']);
$doctitle = trim($_POST['doctitle']);
$docno = trim($_POST['docno']);
$ia = trim($_POST['ia']);
$doe = trim($_POST['doe']);
$pno = trim($_POST['pno']);
$pissuedby = trim($_POST['pissuedby']);
$pdoe = trim($_POST['pdoe']);
$vno = trim($_POST['vno']);
$vissuedby = trim($_POST['vissuedby']);
$vdoe = trim($_POST['vdoe']);
if(isset($_FILES["doc"]["name"]) && !empty($_FILES["doc"]["name"])){
//image insertion
$target_dir = 'doc_uploads/';
$target_file = $target_dir . basename($_FILES["doc"]["name"]);
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
$check = getimagesize($_FILES["doc"]["tmp_name"]);
if($check !== false){
if (!file_exists($target_file)){
if($_FILES["doc"]["size"] <= 2097152){
$permissible_images = array('jpg', 'png', 'jpeg', 'gif');
if(in_array($imageFileType, $permissible_images)){
if (move_uploaded_file($_FILES["doc"]["tmp_name"], $target_file)){
// create a new user profile
$sql = "INSERT INTO citizen_info(ca, hno, rno, location, country, state, city, pin, doctitle, docno, ia, doe, pno, pissuedby, pdoe, vno, vissuedby, vdoe, doc, created_at) VALUES ('$ca', '$hno', '$rno', '$location', '$country', '$state', '$city', '$pin', '$doctitle', '$docno', '$ia', '$doe', '$pno', '$pissuedby', '$pdoe', '$vno', '$vissuedby', '$vdoe', '$target_file', NOW())";
if(mysqli_query($con,$sql)){
$response["error"] = false;
$response['docno'] = $docno;
echo json_encode($response);
}else{
$response["error"] = true;
$response["error_msg"] = "INSERT operation failed";
echo json_encode($response);
}
}else{
// Throw Error Here
$response["error"] = true;
$response["error_msg"] = "File could not be uploaded";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "Only jpg, png and gif images are allowed";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "file size is above 2MB";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "file already exists";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "invalid image format";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "Empty file";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "Few fields are missing";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "Database connection failed";
echo json_encode($response);
}
?>
最佳答案
有几件事我想指出。
您的表单验证
var status = $('form')[0].checkValidity();不起作用，因为您没有包含required<input ...>中的属性元素。像这样包含它们:<input type="text" placeholder="Current address" class="form-control required" id="ca" name="ca" required>- 使用
e.preventDefault();从一开始就阻止您的表单被提交。 - 如果您通过 AJAX 上传文件，请使用 FormData目的。但请记住，旧浏览器不支持 FormData 对象。 FormData 支持从以下桌面浏览器版本开始:IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+。
- 设置以下选项，
processData: false和contentType: false在您的 AJAX 请求中。请参阅the documentation了解它们的作用。 - 最后，对
form_citizenship.php上的表单输入进行正确验证页面，因为现在一团糟。
所以你的 jQuery 应该是这样的:
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
var status = $('form')[0].checkValidity();
if(status){
var formData = new FormData($('form')[0]);
$.ajax({
url: "form_citizenship.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
async: false,
dataType: "JSON",
success: function(json){
if(json.error){
alert(json.error_msg);
}else{
alert(json.docno);
}
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
}
});
});
并像这样处理您的 AJAX 请求:
<?php
session_start();
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','miisky');
$response = array();
$con = mysqli_connect(HOST,USER,PASS,DB) or die('Unable to Connect');
if(!mysqli_connect_errno()){
$error_flag = false;
foreach($_POST as $value){
if(empty($value)){
$error_flag = true;
break;
}
}
if(!$error_flag){
//receiving post parameters
$ca =$_POST['ca'];
$hno = trim($_POST['hno']);
$rno = trim($_POST['rno']);
$location = trim($_POST['location']);
$country = trim($_POST['country']);
$state = trim($_POST['state']);
$city = trim($_POST['city']);
$pin = trim($_POST['pin']);
$doctitle = trim($_POST['doctitle']);
$docno = trim($_POST['docno']);
$ia = trim($_POST['ia']);
$doe = trim($_POST['doe']);
$pno = trim($_POST['pno']);
$pissuedby = trim($_POST['pissuedby']);
$pdoe = trim($_POST['pdoe']);
$vno = trim($_POST['vno']);
$vissuedby = trim($_POST['vissuedby']);
$vdoe = trim($_POST['vdoe']);
if(isset($_FILES["doc"]["name"]) && !empty($_FILES["doc"]["name"])){
//image insertion
$target_dir = 'doc_uploads/';
$target_file = $target_dir . basename($_FILES["doc"]["name"]);
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
$check = getimagesize($_FILES["doc"]["tmp_name"]);
if($check !== false){
if (!file_exists($target_file)){
if($_FILES["doc"]["size"] <= 2097152){
$permissible_images = array('jpg', 'png', 'jpeg', 'gif');
if(in_array($imageFileType, $permissible_images)){
if (move_uploaded_file($_FILES["doc"]["tmp_name"], $target_file)){
// create a new user profile
$sql = "INSERT INTO citizen_info(ca, hno, rno, location, country, state, city, pin, doctitle, docno, ia, doe, pno, pissuedby, pdoe, vno, vissuedby, vdoe, doc, created_at) VALUES ('$ca', '$hno', '$rno', '$location', '$country', '$state', '$city', '$pin', '$doctitle', '$docno', '$ia', '$doe', '$pno', '$pissuedby', '$pdoe', '$vno', '$vissuedby', '$vdoe', '$target_file', NOW())";
if(mysqli_query($con,$sql)){
$response["error"] = false;
$response['docno'] = $docno;
echo json_encode($response);
}else{
$response["error"] = true;
$response["error_msg"] = "INSERT operation failed";
echo json_encode($response);
}
}else{
// Throw Error Here
$response["error"] = true;
$response["error_msg"] = "File could not be uploaded";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "Only jpg, png and gif images are allowed";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "file size is above 2MB";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "file already exists";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "invalid image format";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "Empty file";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "Few fields are missing";
echo json_encode($response);
}
}else{
$response["error"] = true;
$response["error_msg"] = "Database connection failed";
echo json_encode($response);
}
?>
关于javascript - 错误 json 响应中出现意外的标记 <，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34877118/