二回

Question

がゴールfireingない：あなたがボタンを押すと
は、テキストボックスの値は1時間の式の下に表示されなければならない

が問題：
私はボタンをクリックして、データが表示されます二度。

私は以下の以下このcodeを試みたが、それは

$('#myform').one('submit', clickHandler); 

    var clickHandler = function (event) { 

     event.preventDefault(); 

    $("#divProcessing").show(); 

    $.ajax({ 
     url: $(this).attr("action"), 
     type: 'POST', 
     async: true, 
     data: $(this).serialize(), 
     dataType: 'json', 
     success: function (resp) { 
      // Hide the "busy" gif: 
      $("#divProcessing").hide(); 

      // Do something useful with the data: 
      $("<h3>" + resp.FirstName + " " + resp.LastName + "</h3>").appendTo("#divResult"); 
     } 
    }); 

}

を動作しません情報：ASP.netのMVCとjQuery
を使用して
* *このコードの基礎から提示されましたこのpage

namespace WebApplication3.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult About() 
     { 
      ViewBag.Message = "Your application description page."; 

      return View(); 
     } 

     public ActionResult Contact() 
     { 
      ViewBag.Message = "Your contact page."; 

      return View(); 
     } 


     [HttpPost] 
     public ActionResult LongRunningDemoProcess(DemoViewModel model) 
     { 
      Thread.Sleep(1000); 
      return Json(model, "json"); 
     } 


    } 


    public class DemoViewModel 
    { 
     public string FirstName { get; set; } 
     public string LastName { get; set; } 
    } 

} 





<h3>Enter Your Name and Submit:</h3> 

@using (Html.BeginForm("LongRunningDemoProcess", "Home", FormMethod.Post, new { id = "myform", name = "myform" })) 
{ 
    @Html.TextBoxFor(m => m.FirstName) 

    @Html.TextBoxFor(m => m.LastName) 

    <input type="submit" name="operation" id="process" value="process" /> 
} 

// We want to show this while the server process is running: 
<div id="divProcessing"> 
    <p>Processing, please wait . . . <img src="https://cdn3.iconfinder.com/data/icons/pictofoundry-pro-vector-set/512/Alien-16.png"></p> 
</div> 

// We want to display the result from our submission in here: 
<div id="divResult"> 

</div> 


<script type="text/javascript"> 

    $(document).ready(function() { 

     // Hide the "busy" Gif at load: 
     $("#divProcessing").hide(); 

     // Attach click handler to the submit button: 
     $('#process').click(function() { 
      $('#myform').submit(); 
     }); 

     // Handle the form submit event, and make the Ajax request: 
     $("#myform").on("submit", function (event) { 
     event.preventDefault(); 

     // Show the "busy" Gif: 
     $("#divProcessing").show(); 
     var url = $(this).attr("action"); 
     var formData = $(this).serialize(); 
     $.ajax({ 
      url: url, 
      type: "POST", 
      data: formData, 
      dataType: "json", 
      success: function (resp) { 

      // Hide the "busy" gif: 
      $("#divProcessing").hide(); 

      // Do something useful with the data: 
      $("<h3>" + resp.FirstName + " " + resp.LastName + "</h3>").appendTo("#divResult"); 
      } 
     }) 
     }); 
    }); 
</script> 

Answer 1

"送信"ボタンで別の "クリック"ハンドラ。それは二回発射だなぜ私はこれがある疑いがあるでしょう：あなたは、明示的にフォームが送信されるように言ったが、余分なコードなしで、自動的にイベントを提出トリガーするフォーム内type="submit"でいずれかのボタンを押している

$('#process').click(function() { 
     $('#myform').submit(); 
    }); 

。したがって、あなたは事実上、フォームの追加提出を注文しています。クリックハンドラを削除すると、一度送信するだけです。