Ajax发布错误加载页面

I have a form in which Ajax is used to send data to a php file. THE DATA SENDS PROPERLY...EVERYTHING WORKS FINE... BUT an "Error loading page" message pops up (using jquerymobile)

html file

<div data-role="page" id="cc">
<div data-role="header">
    <h1>Home</h1>
</div>
<div data-role="content">
    <form id="cname" align="left" action="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" value=""  />
        <input type="submit" value="Submit" data-inline="true">
    </form>


    <div id="result" style="visibility: hidden"></div>
</div>
</div>

    <script type="text/javascript">
       $("#cname").submit(function (e) {
           e.preventDefault();
           $.ajax({
               url: 'http://www.clubbedin.isadcharity.org/createclub.php',
               crossDomain: true, //set as a cross domain requests
               type: 'post',
               data: $("#cname").serialize(),
               success: function (data) {
                   $("#result").html(data);
               },
           });
        });
    </script>

php file

header("access-control-allow-origin: *");

$name = $_POST['name'];

Try adding this in your JavaScript:

jQuery.support.cors = true;

Try adding

Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, *

to your header

Your form must also have have this attribute:

data-ajax="false"

Without it jQuery Mobile will initialize its own ajax logic for form posting and you don't want that. Read more about it here or read my other answer on how to properly handle forms in jQuery Mobile.