javascript - 无法使用 AJAX 和 jQuery POST 到我的 API

Question

我对 jQuery 和 javascript 很陌生，并且很难对我的 API 进行 POST 和 GET。当我通过 git bash 命令行执行curl 请求时，我能够正常发布，但无法通过 JS 和 jQuery 执行。它也无法填充到我的 HTML 主页面上。以下是我的表单的代码:

<h2>My Lists:</h2>
<ul id="orders"></ul>

<h3>Add Restaurant</h3>
<form action="" method="POST">
    <p>
        restaurant name: 
        <input type="text" id="name">
    </p>
    <input id="add-rest" type="submit" value="submit">
</form>         
<script src="jquery-1.12.1.min.js"></script>
<script src="script.js" type="application/javascript"></script> 

$(function(){
    var $orders = $('#orders');
    var $name = $('#name');

    $.ajax({
        type: 'GET',
        url: 'http://testing-sh1.appspot.com/restaurant',
        success: function(orders){
            $.each(orders, function(i, order){
                $orders.append('<li>name: ' + order.name + '</li>');
            });
        }
    });
});

$('#add-rest').on('submit', function(){
    var order = {
        name: $name.val(),
    };

    $.ajax({
        type: 'POST',
        url: 'http://testing-sh1.appspot.com/restaurant',
        data: order,
        success: function(newOrder){
            $orders.append('<li>name: ' + newOrder.name + '</li>');
        }
    });
});

我有我的实时 API URL，仅供测试之用。希望第二双眼睛能帮助我。谢谢大家的帮助。

Answer 1

您有一个拼写错误，位于

var order = {
    name: $name.val(),
};

删除尾部 , 以使其成为有效对象。

我收到了“测试”的回复

{"reviews": [], "name": "test", "key": 5649391675244544}

我直接测试了AJAX。

还要确保变量正确传递，并且它们是在各自函数的作用域中定义的。与您当前的代码一样， var $name = $('#name'); $name 在您的提交处理程序中将无法访问，因为它是另一个函数的本地函数不同的范围。

您还需要阻止表单提交的默认行为，因为您是通过自定义 AJAX 调用处理该事件。