如何在提交模态表单时禁止查询字符串出现在 url 上？

Question

我创建了一个用于提交单个文本输入的模态表单。我想通过 ajax 提交而不重新加载浏览器，但每当我提交表单时自动关闭，页面刷新并且输入数据显示在 url 上，就好像它是用 GET 方法提交的一样，即使我已在 ajax 上声明类型："POST"。请帮我解决这个问题。

我正在使用 codeigniter 3.9

html形式：

               <div class="modal-dialog">
                  <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="H3">Update Product Location</h4>
                     </div>
                     <div class="modal-body">
                        <form role="form">
                            <div class="row">
    <div class="col-md-8 form-group"><input class="form-control" name="pincodeloc" id="pincodeloc" placeholder="Enter pincode"/></div>
    <input type="hidden" name="prod_id" id="prod_id" value="" readonly/>
    <div class="col-md-4"><button type="submit" class="btn btn-primary" id="addproductlocbtn">Save</button></div>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div> 

ajax code:
$("#addproductlocbtn").click(function() {
        addproductlocation();
    }); 

function addproductlocation() {
        var returnval = true;
        if (returnval==true) {
            $.ajax({
                    type: "POST",
                    url: baseUrl + "admin/product/productlocation",
                    data: {
                        pincode: $("#pincodeloc").val(),
                        prodid: $("#prod_id").val()
                    }
                })
                .done(function(msg) {
                    if (msg) {
                        $('#emsg').html('');
                        $("#pincodeloc").val('');
                        $("#prod_id").val('');
                    } else {
                        $('#success_msg').html('');
                        $('#emsg').html('<p>' + msg + '</p>');
                    }
                });
        } else {
            return false;
        }
}

url 上的查询字符串显示为： www.xyz.com/dashboard/product?pincodeloc=&prod_id=12

Answer 1

使用 jquery 形式：https://github.com/jquery-form/form

或使用Event.preventDefault():

$("#addproductlocbtn").click(function(e) {
        e.preventDefault();
        addproductlocation();
});

Answer 2

如果您不想重新加载页面，请使用 <button type="button"> 而不是 <button type="submit">。

如何在提交模态表单时禁止查询字符串出现在 url 上？

how to disable query string from appearing on url on submitting modal form?

php

forms

ajax

codeigniter

modal-dialog