Jquery Ajax 在提交表单上获取当前 URL

Posted 2023-05-09

【中文标题】Jquery Ajax 在提交表单上获取当前 URL

【英文标题】：Jquery Ajax Get the current URL on submit form

【发布时间】：2018-09-19 09:53:26

【问题描述】：

我使用来自https://scotch.io/tutorials/submitting-ajax-forms-with-jquery 的代码从这些表单中发布这些数据

 <form id="request" method="post" autocomplete="off" class="form-horizontal row scrollTo" novalidate="novalidate">
    <div class="form-group row">
    <label class="control-label label-font" for="lastname">Lastname</label>
    <input name="lastname" id="lastname" class="form-control required" type="text">
    <label class="control-label label-font" for="firstname">Firstname</label>
    <input name="firstname" id="firstname" class="form-control required" type="text">
    </div>
    <div class="form-group row">
    <label class="control-label label-font" for="mobile">Mobile</label>
    <input name="mobile" id="mobile" class="form-control required number" type="text" minlength="10" maxlength="10">
    <label class="control-label label-font" for="vat">vat</label>
    <input name="vat" id="vat" class="form-control validVAT required" maxlength="9" type="text">
    </div>
    <div class="form-group row">
    <label class="control-label label-font" for="address">Address</label>
    <input name="address" id="address" class="form-control required" type="text">
    <label class="control-label label-font" for="streetno">Streetno</label>
    <input name="streetno" id="streetno" class="form-control required" type="text">
    </div>
    <div class="form-group row">
    <label class="control-label label-font" for="user_postcode">Postcode</label>
    <select name="user_postcode" id="user_postcode" class="form-control select2 required select2-hidden-accessible" tabindex="-1" aria-hidden="true"><option value="">Select</option><optgroup label="country1">
    <option value="3002123">3002123 Las Vegas</option><option value="3002723">3002723 Los Angeles</option></optgroup></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-user_postcode-container"><span class="select2-selection__rendered" id="select2-user_postcode-container" title="3002123 Las Vegas">3002123 Las Vegas</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> </div>
    </div>
    <label class="control-label label-font" for="user_email">Email</label>
    <input name="user_email" id="user_email" class="form-control required" type="text">
    </div>
    <div class="form-group row">
    <label class="control-label label-font" for="notes">Notes</label>
    <textarea type="text" name="notes" id="notes" class="form-control"></textarea>
    </div>
    <div class="form-group text-center">
    <input type="hidden" name="host"><input type="hidden" name="userID" class="userID" value="ho9fbhp3mhb"><input type="hidden" name="usage" value="auto">
    <button type="submit" class="btn btn-primary btn-sm" data-wizard="letters">Submit</button>
    </div>
    </form>

在 .php 文件中。

<script type="text/javascript">

            jQuery(document).ready(function() 

                jQuery("#request").submit(function(event) 

                    var formData = 
                        'lastname'         : jQuery('input[name=lastname]').val(),
                        'firstname'        : jQuery('input[name=firstname]').val(),
                        'phone'            : jQuery('input[name=mobile]').val(),
                        'afm'              : jQuery('input[name=vat]').val(),
                        'address'          : jQuery('input[name=address]').val(),
                        'address_no'       : jQuery('input[name=streetno]').val(),
                        'user_postcode'    : jQuery('select[name=user_postcode]').val(),
                        'email'            : jQuery('input[name=user_email]').val(),
                        'notes'            : jQuery('textarea[name=notes]').val()
                    ;

                    jQuery.ajax(
                        type        : 'POST', 
                         url         : 'process.php', // the url where we want to POST 
                        data        : formData, 
                        dataType    : 'json', 
                                    encode          : true
                    )
                        .done(function(data) 

                            console.log(data); 

                        );

                    event.preventDefault();
                );

            );

        </script>

这是我编写的代码，但我想将当前 url 保存在 .php 文件中。 执行此操作的代码是什么？ 我将代码放在哪里以及如何放置？ 另外，我可以只在表单有效时设置所有这些代码吗？

【问题讨论】：

您希望 ajax url 成为当前 url？

您要保存您发送的页面的 URL 吗？还是这个页面？

Ajax 应该通过标头发送 Referrer 和/或 Origin。

我要保存表单所在页面的url

【参考方案1】：

window.location.href 属性返回当前页面的 URL。

console.log(window.location.href);

还有：https://www.w3schools.com/js/js_window_location.asp

如果我们遇到问题

var formData = 
  'lastname': jQuery('input[name=lastname]').val(),
  'firstname': jQuery('input[name=firstname]').val(),
  'phone': jQuery('input[name=mobile]').val(),
  'afm': jQuery('input[name=vat]').val(),
  'address': jQuery('input[name=address]').val(),
  'address_no': jQuery('input[name=streetno]').val(),
  'user_postcode': jQuery('select[name=user_postcode]').val(),
  'email': jQuery('input[name=user_email]').val(),
  'notes': jQuery('textarea[name=notes]').val(),
  'url' : window.location.href
;

你可以这样做。

【讨论】：

感谢您的回答！！您能否告诉我如何仅在表单有效时将这些数据发送到 php 文件？

有很多方法可以做到这一点。 ***.com/questions/37912937/…我推荐你看看这里。

【参考方案2】：

向formData添加另一个属性：

var formData = 
    'lastname'         : jQuery('input[name=lastname]').val(),
    'firstname'        : jQuery('input[name=firstname]').val(),
    'phone'            : jQuery('input[name=mobile]').val(),
    'afm'              : jQuery('input[name=vat]').val(),
    'address'          : jQuery('input[name=address]').val(),
    'address_no'       : jQuery('input[name=streetno]').val(),
    'user_postcode'    : jQuery('select[name=user_postcode]').val(),
    'email'            : jQuery('input[name=user_email]').val(),
    'notes'            : jQuery('textarea[name=notes]').val(),
    'url'              : location.href
;

【讨论】：

感谢您的回答！！您能否告诉我如何仅在表单有效时将这些数据发送到 php 文件？

将验证码放入您的.submit() 函数中。如果无效，请返回false 以防止表单被提交。