JQuery按钮获取url并提交php表单

JQuery button takes url and submits php form

本文关键字:提交 php 表单 url 按钮 获取 JQuery      更新时间:2023-09-26

我运行了一个应用程序,它缩短了经过身份验证的用户的url。这个应用程序的表单只是完整url的输入,然后输出一个缩短的url。

我想建立一个按钮,可以添加到生成的页面(网址很长很乱),一旦点击就会自动提交网址缩短表单。

url缩短应用程序在php中运行。我读过一些关于使用ajax提交表单的文章。如果它在不同的网站上,这有关系吗?有人有很好的教程或这类事情的起点吗?

非常感谢!

编辑以包含代码:

<form action=""  method="post">
  <label for="form_url">Which URL do you want to shorten?</label>
  <input type="url" id="form_url" name="form[url]" required="required" value="http://">
  <input type="hidden" name="form[_token]">
  <button type="submit" role="button">Shorten URL</button>
</form>

$(document).ready(function() {
  $('a.btn').click(function() {
  var pathname = window.location;
  $.ajax({
    type: "POST",
    url: 'http://url',
    data: $(pathname).serialize,
    success: success,
    dataType: text
  }); 
});
});

考虑到您没有发布任何代码,没有什么要做的,但我认为您要问的是:

<form id="myForm" method="post">
    <input type="text" name="long_url"/>
    <input type="submit" value="Send"/>
</form>

现在在Javascript中,您将捕获提交事件和调用以及ajax请求:

$("#myForm").submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "urlOfPhp",
        data: $("#myForm").serialize(),
        success: function(returned_data) {
            // Handle Success Here.
        }
    }).error(function(){
        // Handle an Error Here.
    });
}); 

这就是Ajax的基础。我也不清楚生成页面按钮的事情,但这是一个很好的起点。