ajax點擊函數會在提交表單中工作嗎？

Question

我正在做一個網站的前端，我需要在提交表單的同時顯示彈出窗口模式。我需要使用INPUT TYPE =「button」，我使用JQUERY CLICK功能代替SUBMIT。這個代碼中的ajax會工作並提交表單嗎？

$("#submit_cc").click(function() { 
 
     $.ajax({ 
 
      url: "#", 
 
      type: "POST", 
 
      data: { 
 
       'acctNumber': $('#acctNumber').val() 
 
      } 
 
     });modal.style.display = "block"; 
 
    }); 
 
/* Display popup modal */ 
 
// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the button that opens the modal 
 
//var btn = document.getElementById("submit_cc"); 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("span_cc_btn")[0]; 
 

 
// When the user clicks the button, open the modal 
 
/*btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
}*/ 
 

 
// When the user clicks on <span>, close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
     modal.style.display = "none"; 
 
    } 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    
 
    position: fixed; 
 
    /* Stay in place */ 
 
    
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    
 
    padding-top: 100px; 
 
    /* Location of the box */ 
 
    
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    
 
    height: 100%; 
 
    /* Full height */ 
 
    
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 
/* Modal Content */ 
 

 
.modal-content { 
 
    font-family: Open Sans; 
 
    color: #afafaf; 
 
    font-size: 16px; 
 
    position: relative; 
 
    background-color: #fefefe; 
 
    border: 1px solid #888; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    -webkit-animation-name: animatetop; 
 
    -webkit-animation-duration: 0.4s; 
 
    animation-name: animatetop; 
 
    animation-duration: 0.4s; 
 
    text-align: center; 
 
    width: 500px; 
 
    margin: auto; 
 
    border-radius: 0px; 
 
    padding: 30px; 
 
} 
 
.modal-content button { 
 
    font-family: Roboto; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    color: white; 
 
    background-color: #ea6a1d; 
 
    border: none; 
 
    padding: 8px 50px; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
} 
 
/* Add Animation */ 
 

 
@-webkit-keyframes animatetop { 
 
    from { 
 
     top: -300px; 
 
     opacity: 0 
 
    } 
 
    to { 
 
     top: 0; 
 
     opacity: 1 
 
    } 
 
} 
 
@keyframes animatetop { 
 
    from { 
 
     top: -300px; 
 
     opacity: 0 
 
    } 
 
    to { 
 
     top: 0; 
 
     opacity: 1 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frm_payt_cc"> 
 
\t <h2>Payment</h2> 
 

 
\t <label class="bill_label">Account Number</label> 
 

 
\t <p><input type="number" name="acctNumber" class="form-control bill_value col-sm-12 col-xs-12" placeholder="Enter acct num"></p> 
 
\t 
 
\t <br><input type="button" id="submit_cc" class="bill_btn col-lg-7 col-md-7 col-sm-12 col-xs-12" value="Submit Payment &rarr;"> 
 
</form> 
 

 
<!-- MODAL POP UP --> 
 
<div id="myModal" class="modal"> 
 
\t <!-- Modal content --> 
 
\t <div class="modal-content"> 
 
\t \t <div class="bill_popup modal-body"> 
 
\t \t \t <h2>Thank You!</h2> 
 
\t \t \t <br> 
 
\t \t \t <center><span class="span_cc_btn"><button type="button">Okay</button></span></center> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

是的，你可以使用POST方法ajax絕對發佈形式的所有內容，這樣的話你不需要提交表單，提交沒有可以發佈的數據使用AJAX PHP的。

小例子是：

$("#submit_cc").click(function(event){ 
    var $form = $("#testform"), 
    url = $form.attr('action'); 
    $.ajax({ 
     url: url, 
     type: "POST", 
     data: $form.serialize() 
    }); 
});