我是 web 开发的新手,现在在 ajax 中出现错误。我有一个页面 (things.php) 用于从用户那里获取信息,然后通过 ajax 将信息发送到 authenticate.php,并在此页面中调用 db.class。 php 用于从数据库中推送和获取数据,
现在我想从用户数据库中获取数据,当点击 things.php 中的 things_register_btn 时。
我的问题是单击“things_register_btn”时,控制台中的 chrome 显示错误:
parsererror SyntaxError: Unexpected token in JSON at position 0
at parse (<anonymous>)
at jquery-3.5.1.min.js:2
at l (jquery-3.5.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2)
当将数据类型更改为“文本”时,控制台显示:{“id”:1,“密码”:“测试”} 从数据库中获取数据
这是我的代码:
东西.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="../project/css/new/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../project/css/main.css" rel="stylesheet">
<link href="../project/css/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet" />
<link href="assets2/css/vazir.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid h-100" >
<div class="row">
<div class="container-fluid col-2 bg-light align-items-start justify-content-start">
<h1 class="text-right my-3" ></h1>
</div>
<div class="container-fluid col-10 bg-light align-items-start justify-content-start">
<h4 class="text-right my-3" >ثبت شیء</h4>
</div>
</div>
<div class="row h-100">
<div class="container col-2 h-100 bg ">
<div class="row">
<div class="col-1 p-0"></div>
<div class="col-10 p-0">
<div class="container p-3">
<a href="#" class="text-white h5"></a>
</div>
<div class="container p-3 border-light border mb-3">
<a href="#" class="text-white h5"> ثبت شیء </a>
</div>
<div class="container p-3 border-light border mb-3">
<a href="#" class="text-white h5"> تحویل شیء </a>
</div>
<div class="container p-3 border mb-3">
<a href="#" class="text-white h5"> گزارش گیری </a>
</div>
</div>
<div class="col-1 p-0"></div>
</div>
<!-- <div class="row">
<div class="col-4 container-fluid">
<nav class ="navbar justify-content-center align-items-start">
<ul class ="navbar-nav">
<li class ="nav-item container col-12 p-3">
<a href="#" class="text-white "> ثبت شیء </a>
</li>
<li class ="nav-item container col-12 p-3">
<a href="#" class="text-white h5"> تحویل شیء </a>
</li>
<li class ="nav-item container col-12 p-3">
<a href="#" class="text-white h5"> گزارش گیری </a>
</li>
<li class ="nav-item container col-12 p-3">
<a href="#" class="text-white h5"> Blogs </a>
</li>
</ul>
</nav>
</div>
</div> -->
</div>
<div class="container col-10 border-3">
<div class="row">
<div class="col-12 justify-content-center align-items-center bg-white">
<div class="row">
<div class="col-4 m-0 h5 p-3 text-muted border-left border-bottom border-
muted"> مشخصات شیء</div>
<div class="col-8 m-0 h5 p-3 text-muted border-bottom border-muted"> تاریخ و
محل</div>
</div>
<div class="row ">
<div class="col-4 container h5 p-3 text-body border-left border-bottom
border-muted justify-content-center align-items-center">
<form class="l-form justify-content-center align-items-center"
role="form" id="login-form" >
<div class="form-group col-12 justify-content-center align-items-center">
<label class="h6 " for="thing-name">نام شیء</label>
<input class="form-control h3 " type="text" name="form-thing-name"
id="thing-name">
<label class="h6" for="thing-type">نوع شیء</label>
<select class="form-control" type="text" name="form-thing-type"
id="thing-type">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<button class="btn btn-primary rounded" type="button"
id="things_register_btn"> ثبت اطلاعات </button>
<!-- <input type="submit" class="btn btn-primary" value="login"
id="submit_btn"/> -->
</form>
</div>
<div class="col-8 h5 p-3 text-body border-bottom border-muted">
<div class="form-group row ">
<div class="col-4">
<label class="h6" for="form-station">خط</label>
<select class="form-control" type="text" name="form-station"
id="thing-line">
<option>غدیر</option>
<option>پروین اعتصامی</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="col-6">
<label class="h6" for="form-station">ایستگاه</label>
<select class="form-control" type="text" name="form-station"
id="thing-station">
<option>غدیر</option>
<option>پروین اعتصامی</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="form-group row ">
<div class="col-4">
<label class="h6" for="form-station">تاریخ</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="form-control input-group-text cursor-
pointer" id="date1">انتخاب تاریخ</span>
</div>
<input type="text" id="thing-date" class="form-control" aria-
label="date1" aria-describedby="date1">
</div>
</div>
<div class="col-6">
<label class="h6 " for="thing-description">توضیحات</label>
<input class="form-control h3 " type="text" name="form-thing-
description" id="thing-description">
</div>
</div>
</div>
<div class="container-fluid p-3 text-dark border-bottom border-muted bg2">
<div class="form-group row justify-content-center">
<div class="col-3">
<label class="h6" for="form-station">جستجو بر اساس</label>
<select class="form-control" type="text" name="form-station"
id="thing-type">
<option>غدیر</option>
<option>پروین اعتصامی</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="col-3">
<label class="h6" for="form-station">ایستگاه</label>
<select class="form-control" type="text" name="form-station"
id="thing-type">
<option>غدیر</option>
<option>پروین اعتصامی</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12 justify-content-center align-items-center bg-white">
<div class="row h-100 justify-content-center align-items-center">
<div class="container-fluid p-3 my-3 text-white ">
<table class="table table-striped table-responsive-md btn-table text-center ">
<thead class="text-warning">
<tr>
<th>ردیف</th>
<th>نام شیء</th>
<th>نوع شیء</th>
<th>خط</th>
<th>ایستگاه</th>
<th>تاریخ</th>
<th>توضیحات</th>
</tr>
</thead>
<tbody id="things-table" class="text-dark">
<tr>
<th scope="row">1</th>
<td>
<button type="button" class="btn btn-teal btn-rounded btn-sm m-
0">Button</button>
</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>
<button type="button" class="btn btn-teal btn-rounded btn-sm m-
0">Button</button>
</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>
<button type="button" class="btn btn-teal btn-rounded btn-sm m-
0">Button</button>
</td>
</tr>
</tbody>
</table>
Table with
</div>
</div>
</div>
<div class="col-6 justify-content-center align-items-center">
<div class="row h-100 justify-content-center align-items-center">
<div class="container p-3 my-3 text-dar ">
<p id="text">.. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript
<script src="assets2/js/jquery-1.11.1.min.js"></script> -->
<script src="assets2/js/jquery-3.5.1.min.js"></script>
<script src="assets2/js/popper.min.js"></script>
<script src="assets2/bootstrap/js/new/bootstrap.min.js"></script>
<script src="assets2/js/jquery.backstretch.min.js"></script>
<script src="assets2/js/scripts.js"></script>
<script src="assets2/js/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
</body>
</html>
脚本.js
$(document).ready(function()
{
//login form
$("#submit_btn").click(function(e){
var username = $('#username').val();
var password = $('#password').val();
if (username==""){
$("#username").addClass('input-error');
}
else if(password==""){
$("#password").addClass('input-error');
}
else
{
$("#password").removeClass('input-error');
$("#username").removeClass('input-error');
$.ajax({
type:'POST',
url:'http://localhost:8080/project/authenticate.php',
data:{
username: username,
password: password
},
// dataType:"text",
success: function(feedback) {
if(feedback.indexOf("success") > -1)
location.href = "things.php";
// alert("hdgasgdjah");
else
$('#text').html(feedback);
},
error: function(jqXHR, exception){
getErrorMessage(jqXHR, exception);
}
});
}
});
//persian date on things
$('#date1').MdPersianDateTimePicker({
targetTextSelector: '#thing-date',
targetDateSelector: '#inputDate1-1',
dateFormat: 'yyyy-MM-dd hh:mm:ss',
isGregorian: false,
enableTimePicker: false,
});
//things form
$("#things_register_btn").click(function(e){
var thing_name = $('#thing-name').val();
$.ajax({
type: 'POST',
url:'http://localhost:8080/project/authenticate.php',
dataType: 'json',
// encode:true,
data:{
thing_name: thing_name
},
cache: false,
success: function(data) {
// $('#text').html(data);
console.log(data);
// $.each(data , function(key , value){
// $('#text').html(value);
//
// console.log(value.des);
// console.log(value.met);
},
error:function(error, x,y)
{
console.log(x,y);
}
// This will clear table of the old data other than the header row
/* $("#things-table").find("tr:gt(0)").remove();
for(var i = 0; i < response[0].length; i++) {
$('#things-table').append('<tr><td>' + response[0][i]['id'] + '</td><td>' +
response[0][i]['first_name'] + " " + response[0][i]['last_name'] + '</td><td>' + response[0]
[i]['table'] + '</td><td>' + response[0][i]['items_won'] + '</td><td>' + response[0][i]
['pledges_made'] +'</td><td>' + response[0][i]['amount_owed'] + '</td><td><button class="btn
btn-primary">CLICK HERE</button></td></tr>');
}
//$('#amount').text(response[1]);
//$('#paymentsTotal').text(response[2]); */
});
// }
});
认证.php
<?php
require_once 'class\DB.class.php';
if(isset($_POST['username'])) {
session_start();
$db = new DB();
$db->connect();
$user_name = trim($_POST['username']);
$user_password = trim($_POST['password']);
$resualt=$db->login_verification($user_name,$user_password);
if ($resualt=="success")
{
echo "success";
}
else
{
echo "نام کاربری یا پسورد نامعتبر است";
}
}
$id[]=1;
$password=123;
if(isset($_POST['thing_name'])) {
// echo '<script>alert("Welcome to Geeks for Geeks")</script>';
$db = new DB();
$db->connect();
$resualt= $db->select_things();
$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
// echo json_encode($arr);
}
?>
db.class.php
<?php
// DB.class.php
class DB {
protected $db_host = 'localhost';
protected $db_user = 'root';
protected $db_pass = '';
protected $db_name = 'db1';
protected $connect_db = '';
// Open a connect to the database.
// Make sure this is called on every page that needs to use the database.
public function connect() {
$this->connect_db = mysqli_connect( $this->db_host, $this->db_user, $this->db_pass, $this-
>db_name );
if ( mysqli_connect_errno() ) {
//printf("Connection failed: %s\'", mysqli_connect_error());
//exit();
// If there is an error with the connection, stop the script and display the error.
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
return true;
}
public function login_verification($form_username,$form_password){
// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $this->connect_db->prepare('SELECT id, password FROM users WHERE username = ?')) {
// Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string
so we use "s"
//$stmt->bind_param('s', $_POST[$form_username]);
$stmt->bind_param('s', $form_username);
$stmt->execute();
// Store the result so we can check if the account exists in the database.
$stmt->store_result();
if ($stmt->num_rows > 0) {
$stmt->bind_result($id, $password);
$stmt->fetch();
// Account exists, now we verify the password.
// Note: remember to use password_hash in your registration file to store the hashed
passwords.
//if (password_verify($_POST[$form_password], $password)) {
if (password_verify($form_password, $password)) {
// if ($_POST['l-form-password']=== $password) {
// Verification success! User has loggedin!
// Create sessions so we know the user is logged in, they basically act like cookies but
remember the data on the server.
// session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
//$_SESSION['name'] = $_POST[$form_username];
$_SESSION['name'] = $form_username;
$_SESSION['id'] = $id;
return "success";
// echo 'Welcome ' . $_SESSION['name'] . '!';
} else {
// Incorrect password
return 'Incorrect password!';
}
} else {
// Incorrect username
return 'Incorrect username!';
}
$stmt->close();
}
}
public function select_things(){
// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $this->connect_db->prepare('SELECT id,password FROM users')) {
$stmt->execute();
/* EXECUTE QUERY */
$stmt->bind_result($id, $password);
/* BIND THE RESULTS TO THESE VARIABLES */
$stmt->fetch(); /* FETCH THE RESULTS */
header("Content-Type: application/json");
$response=array("id" => $id, "password" => $password);
echo json_encode($response);
if ($stmt->num_rows > 0) {
/* RETURN THIS DATA TO THE MAIN FILE */
}
$stmt->close(); /* CLOSE THE PREPARED STATEMENT */
exit;
// echo json_encode(array("result"=>$result), JSON_UNESCAPED_UNICODE);
}
}
}