這是爲什麼不打印到控制檯

Question

你好，我有一些數據的形式，我要的是，當我點擊一個按鈕一個jQuery函數執行並在控制檯打印所有數據，所以這是我的表單代碼：

<form> 
    <div class="row">   
     <div class="col-md-3"> 
      <div class="form-group"> 
       <label for="fecha">Fecha:</label> 
       <input type="text" name="fecha" id="fecha" class="form-control" placeholder="dd/mm/yyyy"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="form-group"> 
       <label for="total">Total:</label> 
       <input type="number" min="0" name="total" id="total" class="form-control"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="form-group"> 
       <label for="abono">Abono:</label> 
       <input type="number" min="0" name="abono" id="abono" class="form-control"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="form-group"> 
       <label for="resta">Restante:</label> 
       <input type="text" name="resta" id="resta" class="form-control" readonly> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-5"> 
      <button type="submit" value="actualizar" class="btn btn-info" id="actualizar">Actualizar Datos 
       <span class="glyphicon glyphicon-refresh"></span> 
      </button> 
     </div> 
    </div> 
</form> 

，這是我的腳本包括

<script src="js/jquery-1.12.2.min.js"></script> 
<script type="text/javascript" src="js/actualizar_orden.js"></script> 

這是actualizar_orden.js文件：

//Al clickear boton actualizar ordenes 
$('#actualizar').click(function(){ 
    var orden = parseInt($('#norden').val()); 
    var id_tecnico = parseInt($('#id_tec').val()); 
    var memoria = $('#memoria').val(); 
    var chip = $('#chip').val(); 
    var tapa = $('#tapa').val(); 
    var falla = $('#falla').val(); 
    var observacion = $('#observacion').val(); 
    var estado = $('#estado').val(); 
    var fecha = $('#fecha').val(); 
    var total = parseInt($('#total').val()); 
    var abono = parseInt($('#abono').val()); 
    var ajaxUrl = 'actualizar_ordenes.php'; 

    data = { 'norden': orden, 'id_tec': id_tecnico, 'memoria': memoria, 'chip': chip, 'tapa': tapa, 
      'falla': falla, 'observacion': observacion, 'estado': estado, 'fecha': fecha, 
      'total': total, 'abono': abono }; 


    console.log(data); 
    /*$.post(ajaxUrl, data, function(response){ 
     if(response.empty) 
      alert("Datos no actualizados"); 
     else{ 
      alert("Datos Actualizados."); 
      location.reload(); 
     } 
    }) */ 
}); 

我只是想將這些數據記錄到控制檯來檢查我是否正確......但是不是用日誌來控制我的頁面，而是自動刷新，所以我看不到控制檯中的輸出......我試過與mozilla和鉻，但仍然沒有什麼

Answer 1

我看你想提交使用jquery的窗體，而不刷新屏幕。

根本就按照你的js文件：

$(function() { 
    $('form.ajax').submit(function(e) { // catch submit event on form with ajax class 
    e.preventDefault(); // prevent form act as default (stop default form sending) 
    var $form = $(this); // caching form object to variable 
    var data = $form.serializeArray(); // getting all inputs from current form and serializing to variable 
    var url = $form.attr('action'); // reading forms action attribute 
    console.log('DATA:', data); 

    $.post(url, data, function(response) { // posting form data to url (action) 
     console.log('RESPONSE:', response); 
     if(response.empty) { 
      alert("Datos no actualizados"); 
      return; 
     } 

     alert("Datos Actualizados."); 
     $form.find('input, select').val(''); // resets form inputs 
    }); 
    }); 
}); 

，改變你的表單標籤是這樣的：

<form class="ajax" action="actualizar_ordenes.php" method="post"> 

這個例子顯示這一點：

1）你可以抓住所有表格提交ajax類定義

2）不需要在js代碼中設置確切的URL（在硬編碼ajaxUrl變量之前）。現在它從表單屬性獲取表單動作url。

3）它阿賈克斯後，如果成功，那麼你可以重新定義一些明智的行爲，使真正靈活的解決方案，而忘記了編寫自定義代碼爲每個表單提交

是不是很靈活？ （：

Answer 2

每form需要一些默認操作上提交做時，它不是將它重新加載默認的頁面，以便防止清爽，你應該添加一些空的動作你<form>標籤，就像這樣：。

<form action="javascript:void(0);">