自定义PHP MVC和AJAX问题,JSON中的JSON意外标记D

Custom PHP MVC and issue with AJAX, JSON Unexpected token D in JSON

本文关键字:JSON 中的 意外 MVC PHP AJAX 问题 自定义      更新时间:2023-09-26

我对我从零开始构建的PHP MVC和jQuery中AJAX的实现有问题,表单正在发送文本数据,接收到的数据在JS文件中,该文件包含在Dashboard类构造中;

模型(dashboard_model.php

<?php
class Dashboard_Model extends Model
{
    function __construct()
    {
        # code...
        parent::__construct();
    }
    function xhrInsert(){
        $text = $_POST['text'];
        $sth = $this->db->prepare('INSERT INTO data (text) VALUES (:text)');
        $sth->execute(array(':text' => $text));
        $data = array('text' => $text, 'id' => $this->db->lastInsertId());
        print json_encode($data);
    }
    function xhrGetListings(){
        $sth = $this->db->prepare('SELECT * FROM data');
        $sth->setFetchMode(PDO::FETCH_ASSOC);
        $sth->execute();
        $data = $sth->fetchAll();
        print json_encode($data);
    }
    function xhrDeleteListing(){
        $id = $_POST['id'];
        $sth = $this->db->prepare('DELETE FROM data WHERE id ="'.$id.'"');
        $sth->execute();
    }
}
?>

控制器(dashboard.php

它为处理ajax回调的默认js文件调用renderer。

<?php
class Dashboard extends Controller
{
    function __construct()
    {
        # code...
        parent::__construct();
        Session::init();
        $logged = Session::get('loggedin');
        if($logged == false){
            Session::destroy();
            header('location: ../login');
            exit;
        } 
        $this->view->js = array('dashboard/js/default.js');
    }
    function index() {
        $this->view->render('dashboard/index');
    }
    function logout() {
            Session::destroy();
            header('location: ../login');
            exit;
    }
    function xhrInsert()    // xml  http request  ajax
    {
        $this->model->xhrInsert();
    }
    function xhrGetListings(){
        $this->model->xhrGetListings();
    }
    function xhrDeleteListing(){
        $this->model->xhrDeleteListing();
    }
}
?>

$(function() {
	$.get('dashboard/xhrGetListings', function(o){
		//console.log(o);
		for (var  i =0; i<o.length; i++)
		{
			$('#listInserts').append('s<div>'+o[i].text+'<a class="del" rel="'+ o[i].id +'" href="#">X</a></div>');
		}
		$('.del').click(function(){
			delItem = $(this);
			var id = $(this).attr('rel');
			
			$.post('dashboard/xhrDeleteListing', {'id': id}, function(o){
				delItem.parent().remove();
			}, 'json');
			return false;
		});
	},'json'); 
	$('#randomInsert').on('submit', function(){
		var url = $(this).attr('action');
		var data = $(this).serialize();
		
		console.log('data received : '+data);
		
		$.ajax({
			url: url,
			type: 'post',
			data: data,
			beforeSend : function(xhr){
				console.log('before'+xhr);
			},
			success : function(data, status, xhr){
				console.log(data);
				$('#listInserts').append('<div>'+data.text+'<a class="del" rel="'+ data.id +'" href="#">X</a></div>');
			},
			error: function(xhr, status, error){
				console.log('erreur ajax');
				console.log('jqXHR =' + xhr + '|status='+status + '|error='+error);
			},
			complete: function(xhr, status){
				console.log('complete xhr = ' + xhr + '|status=' + status);
			},
			statusCode : {
				404 : function() {
					console.log('STATUSCODE : 404 Page not found');
				}
			}
		});
		return false;
	});
});
<br/>
<form id="randomInsert" action="<?PHP echo URL; ?>dashboard/xhrInsert" method="post">
	<input type="text" name="text" />
	<input type="submit"  />
</form>
<div id="listInserts">
</div>

在Chrome开发者上看到的结果是:

data received : text=qsdfq
default.js:35 before[object Object]
default.js:38 Dashboard Object
(
    [view] => View Object
        (
            [js] => Array
                (
                    [0] => dashboard/js/default.js
                )
        )
    [model] => Dashboard_Model Object
        (
            [db] => Database Object
                (
                )
        )
)
{"text":"qsdfq","id":"102"}
default.js:46 complete xhr = [object Object]|status=success

当然,这不是理想的结果,因为它显示Undefined,并且即使我在jQuery中放入JSON类型的数据,它也不会提取JSON数据

Chrome开发工具上的XHR响应是:

Dashboard Object ( [view] => View Object ( [js] => Array ( [0] => dashboard/js/default.js ) ) [model] => Dashboard_Model Object ( [db] => Database Object ( ) ) ) {"text":"qsdfq","id":"102"}

主要问题似乎是那些添加的东西

Dashboard Object ( [view] => View Object ( [js] => Array ( [0] => dashboard/js/default.js ) ) [model] => Dashboard_Model Object ( [db] => Database Object ( ) ) )

在jquery $.get$.post中要处理的返回ajax结果之上,数据类型为json!

我不知道您使用的是哪种MVC。您在问题中发现了问题。

您的代码的响应是:-

Dashboard Object ( [view] => View Object ( [js] => Array ( [0] => dashboard/js/default.js ) ) [model] => Dashboard_Model Object ( [db] => Database Object ( ) ) ) {"text":"qsdfq","id":"102"}

由于退货引起的问题:-

Dashboard Object ( [view] => View Object ( [js] => Array ( [0] => dashboard/js/default.js ) ) [model] => Dashboard_Model Object ( [db] => Database Object ( ) ) )

如果您收到以下信息,您的代码工作正常:-

{"text":"qsdfq","id":"102"}

如果这对你有用,这是我的建议。首先检查您的模型并写入将您的函数更改为:-

function xhrInsert(){
    $text = $_POST['text'];
    $sth = $this->db->prepare('INSERT INTO data (text) VALUES (:text)');
    $sth->execute(array(':text' => $text));
    $data = array('text' => $text, 'id' => $this->db->lastInsertId());
    return json_encode($data);
}

现在转到控制器并更改您的功能:-

function xhrInsert()    // xml  http request  ajax
{
    $data = $this->model->xhrInsert();
    echo $data;
    die;
}

如果以上不起作用,请尝试此

function xhrInsert()    // xml  http request  ajax
{
    $data = $this->model->xhrInsert();
    return $data;
}

若这两个选项都不起作用,最后为它创建一个视图,并在视图中回显数据。

function xhrInsert()    // xml  http request  ajax
{
    $data = $this->model->xhrInsert();
    //Something like below
    $this->view->render('dashboard/insert', ['data' => $data]);
}