如何使用ajax jquery显示插入的查询数据而不刷新

Posted 2023-05-09

【中文标题】如何使用ajax jquery显示插入的查询数据而不刷新

【英文标题】：how to display an inserted query data without refreshing using ajax jquery

【发布时间】：2017-02-05 05:39:03

【问题描述】：

我现在拥有的是一个表单和一个显示提交数据的容器，它使用 ajax 请求在不刷新的情况下提交，表单和显示数据的容器在同一页面上。

我尝试使用$("id").val(); 获取表单内的输入值并使用$('#display').html(); 显示它

但我在表单中有很多输入字段，我不想复制粘贴 jquery 中的所有输入值，因为它看起来不专业、肮脏且效率不高。

javascript

$(document).ready(function()
    $("#add_rec").click(function(e)
        var me = $(this);
        e.preventDefault();
        if ( me.data('requestRunning') ) 
            return;
        
        var inputs = $("#u_rec_form").serialize();

        me.data('requestRunning', true);
        $.ajax(
            type: 'POST',
            url: 'process.php',
            data: inputs,
            success: function(data)
                    alert(data);

                ,
                 complete: function() 
                    me.data('requestRunning', false);
                
            );

        return false;

    );
);

HTML

<form id="u_rec_form">
        <div class="row">
          <div class="form-group col-xs-5 col-lg-7">
            <label for="code">Patient's Username</label>
            <input type="text" name="cust_username" placeholder="Username" class="form-control" />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-xs-5 col-lg-7 ">
            <label for="code">Patient's Password</label>
            <input type="password" name="cust_password" placeholder="Password" class="form-control input-normal" />
          </div>
        </div>
         <div class="row">
          <div class="form-group col-xs-5 col-lg-7">
            <label for="code">Patient's First Name</label>
            <input type="text" name="cust_fname" placeholder="First name" class="form-control" />
          </div>
        </div>
         <div class="row">
          <div class="form-group col-xs-5 col-lg-7">
            <label for="code">Patient's Last Name</label>
            <input type="text" name="cust_lname" placeholder="Last name" class="form-control" />
          </div>
        </div>
         <div class="row">
          <div class="form-group col-xs-5 col-lg-7">
            <label for="code">Patient's Date of Birth</label>
            <input type="text" name="cust_age" placeholder="DD/MM/YYYY" class="form-control" />
          </div>
        </div>
        <div class="row">
            <input type="hidden" name="submitted" value="1">
            <button type="submit" id="add_rec" class="btn btn-default">Submit</button>
        </div>
    </form>

还有其他方法吗？

我有这些输入

<label for="code">First Name: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_fname']?></span></label><br><br>
<label for="code">Last Name: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_lname']?></span></label><br><br>
<label for="code">Age: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_age']?></span></label>

我试过用这个 $('输入').each(函数() var inputVal = $(this).val(); $('span').append(inputVal); ); 我将在每个标签中显示所有输入值，这不是我想要的

【问题讨论】：

问题描述中肯定缺少一些东西。不清楚确切的问题是什么。你提到了一个容器......然后提到了许多输入和重复代码......到底要做什么？

【参考方案1】：

使用“.append()”方法代替.html()。

更新：

如果您想获取输入的所有数据然后显示它，您可以迭代到每个输入字段然后显示它。首先向输入元素添加一个类，以便轻松编辑。

$('.input-class').each(function()
      var inputVal = $(this).val();
      $('#display').append(inputVal);
)