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和chrome但仍然没有尝试

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）它会发布ajax帖子，如果成功，那么你可以重新定义一些明智的行为来制作非常灵活的解决方案，而忘记为每个表单提交自定义代码

不灵活吗？（：

Answer 2

每个form都需要在提交时执行一些默认操作。如果未设置，则默认重新加载页面。因此，为了防止刷新，您应该在<form>标记中添加一些空操作，如下所示：

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

为什么这不打印到控制台

2 个答案: