Question

这将会有点长。

我有一个表单，数据需要从该表单转到网址。还需要存在3个参数 - action = create（这意味着数据将被添加而不被更新或删除，type = school（这意味着它应该进入学校表），学校将成为包含表单数据的JSON对象。

所以这是我的表格

<!-- index.html -->

<!doctype html>
<html>
<head>
<title>Look I'm AJAXing!</title>

<!-- load jquery via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<sccript src="magic.js"></script>
</head>
<body>
<div class="col-sm-6 col-sm-offset-3">

    <h1>Form</h1>

    <!-- OUR FORM -->
    <form method="POST" enctype="application/json">

    <input type="hidden" name="action" value="create">
    <input type="hidden" name="type" value="school">
    <input type="hidden" name="school" value="response">

    <!-- NAME -->
    <div id="name-group" class="form-group">
        <label for="Name">Name</label>
        <input type="text" class="form-control" name="name">
        <!-- errors will go here -->
    </div><br>

    <div id="address-group" class="form-group">
        <label for="address">Address</label>
        <input type="text" class="form-control" name="address">
        <!-- errors will go here -->
    </div><br>

    <div id="website-group" class="form-group">
        <label for="website">Website</label>
        <input type="text" class="form-control" name="website">
        <!-- errors will go here -->
    </div><br>

    <div id="twitter-group" class="form-group">
        <label for="twitter">Twitter</label>
        <input type="text" class="form-control" name="twitter">
    </div><br>

    <button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button>

</form>

</div>
</body> 
</html>

以下是我的.js文件

// magic.js
$(document).ready(function() {

// process the form
$('form').submit(function(event) {

    // get the form data
    var school = {
        'action' : $('input[name=action]').val(),
        'type' : $('input[name=type]').val(),
        'school': $('input[name=school]').val(),
        'Name'              : $('input[name=Name]').val(),
        'address'             : $('input[name=address]').val(),
        'website'    : $('input[name=website]').val(),
        'twitter'    : $('input[name=twitter]').val()
    };

    // process the form
    $.ajax({
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        contentType : 'json',
        beforeSend  : function(request){
            request.setRequestHeader("Access-Control-Allow-Origin","*");
        },
        url         : 'https://your_url.aspx', // the url where we want to POST
        data        : school, // our data object
        dataType    : 'json', // what type of data do we expect back from the server
                    encode          : true,
        success: function(data){
        console.log(data);
    }
    })

     // using the done promise callback
    .done(function(data) {

       // log data to the console so we can see
        console.log(data); 

            // here we will handle errors and validation messages
    });

    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});

});

尽管在互联网上搜索了大量的解决方案，但我一直在为Access-Control-Allow起源等带来很多错误。我现在看到以下错误：

XMLHttpRequest无法加载https://your_url.aspx。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点'null'访问。

知道我哪里错了吗？

如果一切正常，我的控制台应显示如下：对象{status：“ok”，响应：“id：the_recent_added_number”}

非常感谢任何帮助。

使用ajax发布表单数据时出错

0 个答案: