使用HTML表单提交请求体进行POST请求

Question

使用HTML表单提交请求体进行POST请求

5

我正在处理一个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 Not Found错误并重定向到http://localhost:7777/customerapp.html，与请求提交相应的表单数据似乎是正确的，但它不能按预期工作。

有人能帮我修复我的HTML代码提交POST请求的重定向问题吗？

- Aarish Ramesh

3个回答

0

你已经使用HTML创建了表单，现在可以添加action属性并设置值为提交URL，例如：

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

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

- Haitham Adnan Mubarak

是的，我想把表单数据创建成 JSON 格式，这就是为什么我不使用 action 属性，而是在 Ajax 中构建表单数据有效载荷的原因。 - Aarish Ramesh

点击提交按钮后，表单将被提交。 - Haitham Adnan Mubarak

在这种情况下，您不应使用form标签和提交按钮，因为您想要手动处理它，请查看此链接https://dev59.com/TXI-5IYBdhLWcg3wO1rl。 - Haitham Adnan Mubarak

我认为，你应该使用表单或者ajax表单提交而不是没有表单元素的ajax提交。表单元素已经具备了序列化输入参数的能力，但是使用ajax时你需要自己格式化值。 - Haitham Adnan Mubarak

-1

你有这个：

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

第一个问题是您选择了输入标签，而不是表单。第二个问题是所需的操作，在这种情况下应该是“提交”。如果您已经在使用JQuery，您可能会对使用方法“serialize（）”来节省一些空间感兴趣。请尝试：

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

使用一个id为Form，这样更容易选择它。

- Diego Viniegra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gaetanoM · Accepted Answer

你的问题在这一行代码中：

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

您的表单没有id，而是使用了name属性，因此您可以这样编写：

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

这就是你的表单出现重定向错误的原因。

$('[name="submitform"]').click(function (e) {
    e.preventDefault(); 
    $.ajax({
        url: "http://localhost:7777/ola-drive/customer/ride",
        type: "POST",
        data: {"customerId": $("#customerId").val()},
        success: function (result) {
            //do somthing here
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<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>