Populate div with data returned from another page using JQuery and AJAX

Question

I have a form that when submitted, goes to blah.php . The problem is, blah.php goes off site to another domain. JQuery sees that and gives a 302 Object Moved error . So I had to use JSON and AJAX to send the form. Comment details are within the Jquery code below.

The flow should be click button, check server side, if not 'ok' response, output response in status div and stop everything server side on that page. If 'ok' was the response let form continue on its way

Quick mock up of my code

<form id="ppform" method="post" action"blah.php">
<input id="someid" type="text" />
<button id="sendbutton">Send</button>
<div id="status"></div>
</form>

$(document).ready(function(){
    $(document).on('click', '#sendbutton', function(){
         $('#status').empty();
         $.ajax({
             type: "POST",
             url: "blah.php",
             data: reqBody,
             dataType: "json",
             success:function(data,textStatus){ 
                  // here I want the div to return data if the response isn't 'ok'
                  if(data!='ok'){
                      $('#status').append(data);
                  }else{
                      // response was 'ok' so empty div, 
                      // show loading gif and submit the form
                      $('#status').empty().html('<div id="proc">Processing</div><img src="loading.gif" />');
                      if (data.redirect){
                         window.location.href = data.redirect;
                      } else {
                         $("#ppform").replaceWith(data.form);
                      }
                  }
               }
         });
    }); 
});

Answer 1

我认为，这是浏览器安全问题，您不能在其他域上发送Ajax请求。

Answer 2

If you're using jQuery to do the ajax requests you could change the datatype to JSONP to do cross domain json calls.

more information here:

jQuery AJAX cross domain