繁体   English   中英

jQuery无法使用Ajax php发布

[英]jquery cannot post with ajax php

我有这个简单的脚本,我想在其中使用AJAX将数据发布到服务器,然后将其吐出(回显),但是它将无法工作...

这是我的输出:

Your viewport width is 1338x684

Ajax wasn't initialized!

在这种情况下,当PHP脚本不获取任何数据时,宽度和高度仅设置为880px * 495px。

testajax.php的网页头:

<head>
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>       <!-- Main Java library script-->
<!-- The following 3 scripts are utilized by the Accordion Menu in the aside side bar -->
<script type='text/javascript' src='js/jquery.cookie.js'></script>          <!-- Acco. Menu script-->
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script><!-- Acco. Menu script-->
<script type='text/javascript' src='js/jquery.dcjqaccordion.2.7.min.js'></script> <!-- Acco. Menu script-->
<!--The following 2 scripts are utilized by the Pan and Zoom Slide Show -->
<script type="text/javascript" src="js/jquery.carouFredSel-6.2.1.js"></script>
<script type="text/javascript" src="js/panzoomslideshow.js"></script>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Testing Ajax</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/normalize.min.css">        <!-- used to normalize-->
        <link rel="stylesheet" href="css/main.css">                 <!-- Main CSS styling-->

<script type="text/javascript">
document.write('<p>Your viewport width is '+ window.innerWidth+'x'+window.innerHeight+'</p>');

$(document).ready(function() {
    $.ajax({
            url: "ajaxresponse.php",
            type: "POST",
            dataType: "json",   
            data: {
                width        : window.innerWidth,
                height       : window.innerHeight
            },    
            success: function( data, textStatus, jQxhr ){
                $("#response pre").html( JSON.stringify( data ) );
            },
            error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
            }
        });
});
</script>


<!-- ********** panzooom.php prints the java script to make a pan and zoom transition slide show, depending on the width and heigth of the viewport *********** -->

             <!--[if lt IE 9]>
                <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
            <!--<![endif]--> 
    <?php include 'ajaxresponse.php';?>                 
</head>

这是ajaxresponse.php文件:

<?php  
if (is_ajax()) {
    if (isset($_POST["data"]) && !empty($_POST["data"])) { //Checks if data value exists
        $data = $_POST["data"];
        echo "Ajax was initialized :)<br>";
        echo '<p>var_dump($_POST):<br>'; 
        var_dump( $_POST );    
    }else{
        "Ajax was initialized, but the value isn't set or it's empty (same same)!<br>";
    }
}else{
echo "Ajax wasn't initialized!<br>";    
}


//Function to check if the request is an AJAX request
function is_ajax() {
    echo "\$_SERVER['HTTP_X_REQUESTED_WITH']  ->   " . $_SERVER['HTTP_X_REQUESTED_WITH'] . "<br>";
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
?> 

问题1

在这里,您告诉jQuery当它发出请求时:

  • 应该说它正在发送JSON
  • 不应将您传递的数据转换为其他格式
 contentType: 'application/json', processData: false, 

在这里,您不传递JSON

 data: { width : window.innerWidth, height : window.innerHeight }, 

并在PHP中:

您尝试从$_POST读取,如果请求格式为JSON,则不会初始化。

 isset($_POST["data"] 

从JavaScript中删除contentType和processData配置。 让jQuery进行其默认的使用表单编码对数据进行编码的操作。


问题2

您正在尝试读取名为data

 $data = $_POST["data"]; 

但您发送的唯一数据称为widthheight

 data: { width : window.innerWidth, height : window.innerHeight }, 

您需要测试实际发送的数据。

问题3

您说( dataType: 'json', )您希望响应中testajax.php JSON,但是testajax.php返回HTML文档。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM