ページをリロードしないでURL Shortenerを動作させるにはどうすればいいですか？

Question

私は自分のウェブサイトで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> 

と私はAJAXまたはそのような何かを使用してページをロードせずに提出し、このフォームを作りたい

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

create.phpファイルに次のコードを持っています。しかし、私は前にAJAXやJQUERYのようなものを試したことはありません。このウェブサイトを単一ページのアプリケーションとして作成するための手順を教えてもらうと、大きな助けになります。

ありがとうございます。私は普遍的な何かがすべきだと思う

Answer 1

は以下のようになります。

$("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!") 
      } 
    }) 
})