如何在不重新加载页面的情况下使URL Shortener工作?

时间:2017-03-23 07:14:34

标签: jquery ajax single-page-application url-shortener

我在我的网站上运行php URL Shortener。我在index.php文件中有以下代码。

<form action="create.php" method="post">
<input type="text" name="longurl" placeholder="long url"><br/>
<input type="text" name="shortword" placeholder="short name"><br/>
<img src="captcha.php"><input type="text" name="captcha"><br/>
<input type="submit" value="Create Short URL"></form>

我在create.php文件中有以下代码

<?php
if($error == '0')
{
echo 'Success!. '.$longurl.' has shortened to mysite.com/'.$shortword.'';
}
else
{
echo 'Error Occured';
}
?>

我希望在不使用AJAX或类似内容加载页面的情况下提交此表单。但是我之前从未尝试过类似AJAX或JQUERY的东西。如果有人给我一步一步的说明,将本网站作为单页应用程序,这将对我有很大的帮助。

提前致谢。

1 个答案:

答案 0 :(得分:0)

我觉得普遍应该是这样的:

$("form").submit(function(){
    var query = '';
    $(this).find("input").each(function(){
       var name = $(this).prop("name");
       var value = $(this).val();
       query = query + '&' + name + '=' + value;
    });
     $.ajax({
        type: "POST",
         url: "myformhandler.php",
        data: query,
         success: function(msg)
          {
             alert ("wow i just submited my form!")
           }
     })
})