Get json ajax php form to work remotely

问题:

So, essentially I have this Javascript which interprets the JSON from my php code. It works great on the local server, however, when I try to move the script to a different server it will not work. I have added the

<?php header("Access-Control-Allow-Origin: *"); ?>

also i've declared my database connection as global within my PHP function.

I'm confused as to why these solutions aren't working.. Also, I understand some of the script is iffy, but I'm only interested in figuring out why its not working from different servers.

<script type="text/javascript"> $("document").ready(function(){   $(".sendText").submit(function(){     $("#sendButton").prop("disabled",true);     $(".errors").html("");     $(".success").html("");     var data = {       "action": "test"     };     data = $(this).serialize() + "&" + $.param(data);     $.ajax({       type: "POST",       dataType: "jsonp",  //new edit       url: "http://myurl.com/testing/jsonpost.php?callback=test",  //new edit       data: data,       success: function(data) {         if(data["success"]=="yes") {         $(".success").html("Message Sent!");         $(".formContainer").html("" + data["json"] + "");         }         else {         if(document.getElementById("sendButton").disabled = true){ document.getElementById("sendButton").disabled = false; }         $(".errors").html("" + data["errors"] + "");         }       }     });     return false;   }); }); </script>

Some Info when I look at the web console from firebug:

Access-Control-Allow-Orig...    * Connection  Keep-Alive Content-Length  0 Content-Type    application/json Date    Wed, 24 Sep 2014 04:22:57 GMT Keep-Alive  timeout=5, max=100 Server  Apache/2.2.27 (Unix) mod_ssl/2.2.27 OpenSSL/1.0.1e-fips DAV/2 mod_bwlimited/1.4 X-Powered-By    PHP/5.4.29

Looks like it is communicating with server but not able to interpret data? thoughts?

Also, this error comes up in the console from the remote server but not when I run on local server:

SyntaxError {stack: (...), message: "Unexpected end of input"}message: "Unexpected end of input"stack: (...) Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function… parsererror 

The PHP code is pretty long (and I prefer not to release all of it) - however here is the shortened version:

<?php header("Access-Control-Allow-Origin: *"); header('Content-Type: application/json'); require "../database/db.php";  if (is_ajax()) {   if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists     $action = $_POST["action"];     switch($action) { //Switch case for value of action       case "test": test_function(); break;     }   } }  //Function to check if the request is an AJAX request function is_ajax() {   return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'; }  function test_function(){ $c="1"; global $con;    $return = $_POST; //to reference post  $content=$return["content"];  //see if content is 140 characters or less if(strlen($content)>140){ $c="0"; $lerror="<li>Your message must be 140 characters or less in length!</li>"; }    if($c=="0"){  //doesnt pass validation $return["success"]="no"; $return["errors"]="$lerror"; }  if($c!="0"){ //passes validation $return["success"]="yes"; } if(isset($_GET['callback'])){  //jsonp edit $return["json"] = json_encode($return); echo $_GET['callback']."(".json_encode($return).")"; //jsonp edit }  }

Also after converting to JSONP on remote server - get error -

"jQuery111006159528985153884_1411663761720 was not called"

回答1:

When dealing with jQuery AJAX using a data type of JSON, any notice, warning or error produced by the server side script will cause issues. The reason being is the outputted PHP errors break the JSON encoding that jQuery is expecting.

I suspect the two environments are not identical, perhaps a different PHP version, missing PHP extension or different settings in the php.ini file.

The best thing to do is to use the provided jQuery AJAX error callback to console log any errors allowing you to essentially troubleshoot any issues being thrown by the server side script.

!!! EDIT 3 !!!

Client Code

$.ajax({     type: "POST",     dataType: "json",     url: "http://myurl.com/jsonpost.php",      data: data,     success: function(response) {         console.log(response);     },     error: function(xhr, status, error) {        console.log(xhr);        console.log(status);        console.log(error);     } });

Server Side Code

header("Access-Control-Allow-Origin: *"); header('Content-Type: application/json');  echo json_encode(array('success' => 'yes'));

Using this bare bones version of your code I can successfully make a cross domain request and console log the response. If you implement this code and it still does not work there is something else at play at the server and/or network level.

回答2:

You can make AJAX calls to a backend API, it needs to return JSONP format and not just JSON, otherwise you can get error. This is due to same origin policy:

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy.

This discussion may be helpful to understand JSONP:

Can anyone explain what JSONP is, in layman terms?

However, one alternative is disable the security of Google Chrome browser, then it will work. But this is not a solution. It is better to use JSonP format.

转载请标明出处:Get json ajax php form to work remotely

文章来源: Get json ajax php form to work remotely