Javascript 使用HTML表单中的请求正文发出Post请求_Javascript_Jquery_Html_Forms_Post

Javascript 使用HTML表单中的请求正文发出Post请求

javascript jquery html forms post

Javascript 使用HTML表单中的请求正文发出Post请求,javascript,jquery,html,forms,post,Javascript,Jquery,Html,Forms,Post,我正在处理一个html页面，它应该向我的服务器提交一个带有请求体的post请求，如下所示 <html> <head>Customer app</head> <body> <div> <table> <tr> <td>Customer Id :</td>

我正在处理一个html页面，它应该向我的服务器提交一个带有请求体的post请求，如下所示

<html>
    <head>Customer app</head>
    <body>
         <div> 
             <table> 
                 <tr>
                     <td>Customer Id :</td> 
                     <td>
                         <form name="submitform" method="post">
                             <input type="text" id="customerId" name="customerId"/>
                             <input type="submit" value="Submit">
                         </form>
                     </td>
                 </tr>
             </table>
        </div>
    </body>

    <script>
    $(document).ready(function(){
        $("#submitform").click(function(e)
        {
            var MyForm = JSON.stringify($("#customerId").serializeJSON());
            console.log(MyForm);
            $.ajax({
                url : "http://localhost:7777/ola-drive/customer/ride",
                type: "POST",
                data : MyForm,

            });
            e.preventDefault(); //STOP default action

        });
    });
    </script>
</html>

它无法按预期工作，因为未找到404被重定向到。但与请求提交相对应的表单数据似乎是正确的

有人能帮我解决我的html代码提交POST请求重定向的问题吗？

您已经使用html创建了表单，您可以添加带有POST url值的操作属性，如

   <form name="submitform" method="post" action="/ola-drive/customer/ride">

除非您想使用ajax，否则您需要手动创建数据表单

您的问题如下：

$("#submitform").click(function(e)

您的表单没有id，只有名称，因此您可以编写：

$('[name="submitform"]').click(function(e)

这就是原因，因为您的表单给您一个重定向错误

$'[name=submitform]'。单击函数e{ e、防止违约； $.ajax{ 网址：http://localhost:7777/ola-驾驶/客户/骑乘，类型:POST,，数据：{customerId:$customerId.val}，成功：功能结果{ //在这里做点什么 } }; }; 客户编号：你有这个：

 $("#submitform").click(function(e){...}

第一个问题是您正在选择一个输入标记，而不是表单。第二个是期望的行动，在这种情况下，应该提交。如果您已经在使用JQuery，那么您可能会对使用“serialize”方法节省一些空间感兴趣。尝试：

$('form').on('sumbit', function(e){
  e.preventDefault();
  $.ajax({
    url: // your path
    type: 'post',
    data: $(this).seialize(),
    ...})
 })

并且为表单使用id，这样更容易选择它。

是的，我想将表单数据创建为JSON，这就是为什么我不使用action属性并在AjaxFrom中构建表单数据负载的原因。一旦单击submit按钮，from将被提交。在这种情况下，您不需要使用表单标记和submit按钮，因为您想手动处理它，请选中此项，您应该使用form或ajax form post，而不使用form元素，form元素已经能够序列化输入参数，但是使用ajax您应该自己格式化值。我仍然遇到同样的问题，请求被重定向到并抛出404 not found Error其余API工作正常。我在单击submitrequesturl:requestmethod:POSTNo时遇到的就是这个错误。我没有ajax设置。我再查一遍