2

ここに、ユーザーが値を入力する必要があるこのフォームがあります。

<form id="result" name="result" action="/HelloStruts2/views/register.action" method="post">
    <label>UserName</label>
    <input type="text" name="userBean.username" value="" id="result_userBean_username"/>
    <input type="submit" id="registerSubmit" value="Submit"/>

</form>

これが私のスクリプトです。

$(document).ready(function(){
     $('#registerSubmit').live('click',function(){
         alert("XD");
         $.ajax({
             //this is the php file that processes the data and send mail
             url: "register.action", 
             //GET method is used
             type: "POST",
             //pass the data           
             //Do not cache the page
             cache: false,
             //success
             success: function (html) {              
                 //if process.php returned 1/true (send mail success)
                $('#result').html(html);       
             }       
         });
     })
})

リクエストを送信する代わりにフォームを送信すると、フォームが正常に検証されています。ページ全体がリロードまたは更新されています。これを防ぐにはどうすればよいですか?

更新 これでスクリプトを更新しました。

$(document).ready(function(){
     $('#result').on('submit',function(e){
         e.preventDefault();
         $.ajax({
             //this is the php file that processes the data and send mail
             url: "register.action", 
             //GET method is used
             type: "POST",     
             //Do not cache the page
             cache: false,
             //success
             success: function (html) {              
                $('#content').html(html);       
             }       
         });
     })
})

しかし、ボタンを2回クリックすると、リクエストを送信する代わりにページがリロードされます

4

3 に答える 3

4

送信（ページのリロード）を停止するには、使用しますpreventDefault();

ただし、フォームを送信する方法は複数あるため、実際には送信に使用されない可能性のあるボタンにバインドしないでください。あなたの例では、テキストフィールドでEnterキーを押すと、フォームで送信がトリガーされます。送信ボタンにバインドされたイベントは捕捉されず、重要なスクリプトは実行されません。

$(document).ready(function(){
     $('#result').live('submit',function(e){ // e is the event
           e.preventDefault(); // stop the event's default action
           alert("XD");
           ...

余談:

live()非常に正当な理由で減価償却されます。使用するon()

フォームが (JS が実行されるまでに) 既に存在する場合は、単純に置き換えます。live()

$('#result').on('submit', function...

または、動的に生成される場合は、すでに存在するものにバインドする必要があり、その #result は最終的に

$(document).on('submit', '#result', function()...

編集

更新されたコードと新しい問題を考えると、以前に述べたように、id コンテンツを持つ要素の内部に id 結果を持つフォームが存在すると思われます。その場合、on() は既に存在する要素に修正する必要があります。この例で#contentは、 が適切な要素です。

$('#content').on('submit', '#result', function()...
于 2012-12-26T03:24:56.817 に答える
1

「e」で操作できるイベント変数を追加します

$('#registerSubmit').live('click',function(e){

そして追加

e.preventDefault();

これにより、ページがリロードされなくなります。だからあなたは持っています：

$(document).ready(function(){
     $('#registerSubmit').live('click',function(e){
         e.preventDefault();
         alert("XD");
         $.ajax({
             //this is the php file that processes the data and send mail
             url: "register.action", 
             //GET method is used
             type: "POST",
             //pass the data           
             //Do not cache the page
             cache: false,
             //success
             success: function (html) {              
                 //if process.php returned 1/true (send mail success)
                $('#result').html(html);       
             }       
         });
     })
})
于 2012-12-26T03:23:07.207 に答える
1 
    $('#registerSubmit').click(function(e){
        e.preventDefault();
    });

jQuery .click 関数を使用し、event.preventDefault() を配置して、フォーム アクション ページに移動しないようにします。

于 2012-12-26T03:37:26.020 に答える