使用ajax将数据插入/更新到数据库，页面无法重新加载
我正在使用AJAX将数据插入/更新到数据库中。页面无法重新加载。在这里，我的问题是，在更新后，没有页面重新加载值的值应显示在下面。有关详细信息，请参阅附件表单截图。
形式：
<div class="panel panel-default" >
<div class="panel-heading row" id="first">
<div class="col-md-4 col-sm-4 col-xs-4">First Name</div>
**here i am fetching values from database**
<div class="col-md-4 col-sm-4 col-xs-4 ellipsis"><?php echo $row->first_name; ?></div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="col-md-4 col-sm-4 col-xs-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7 col-md-offset-2 text-center">
<label class="col-md-4">First Name</label>
<div class="col-md-8">
<input type="hidden" name="id" value="<?php echo $row->id; ?>" />
<input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br>
<input type="submit" value="Save" class="btn btn-success" style="width:70px;">
<!-- <button type="submit" class="btn btn-success" name="" id="">Save</button>-->
<button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
脚本：
<script>
$(document).ready(function () {
$('#data_form').on('submit', function (e) {
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_basicinformation_edit',
data: form_data,
success: function (data)
{
**here i want to display the database values first name**
},
error: function ()
{
alert('failed');
}
});
e.preventDefault();
});
});
</script>
这是以下错误：
2 个答案:
答案 0 :(得分：0)
在div中添加一个id，在从数据库中获取名称后显示名称。
<div class="panel panel-default" >
<div class="panel-heading row" id="first">
<div class="col-md-4 col-sm-4 col-xs-4">First Name</div>
**here i am fetching values from database** <div class="col-md-4 col-sm-4 col-xs-4 ellipsis" id="name_div"><?php echo $row->first_name; ?></div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="col-md-4 col-sm-4 col-xs-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7 col-md-offset-2 text-center">
<label class="col-md-4">First Name</label>
<div class="col-md-8">
<input type="hidden" name="id" value="<?php echo $row->id; ?>" />
<input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br>
<input type="submit" value="Save" class="btn btn-success" style="width:70px;">
<!-- <button type="submit" class="btn btn-success" name="" id="">Save</button>-->
<button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
然后，使用jquery设置在Ajax发布请求成功时显示名字的div的文本
<script>
$(document).ready(function () {
$('#data_form').on('submit', function (e) {
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_basicinformation_edit',
data: form_data,
success: function (data)
{
$('#name_div').text($("#first_name").val());
},
error: function ()
{
alert('failed');
}
});
e.preventDefault();
});
});
</script>
答案 1 :(得分：0)
您必须定义要在其中显示名称的类或ID，在ajax成功后，您将调用此id或类来显示数据。 像这样：
表格：
<div class="panel panel-default" >
<div class="panel-heading row" id="first">
<div class="col-md-4 col-sm-4 col-xs-4">First Name</div>
<div id="fname"> </div>
**here i am fetching values from database** <div class="col-md-4 col-sm-4 col-xs-4 ellipsis"><?php echo $row->first_name; ?></div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="col-md-4 col-sm-4 col-xs-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7 col-md-offset-2 text-center">
<label class="col-md-4">First Name</label>
<div class="col-md-8">
<input type="hidden" name="id" value="<?php echo $row->id; ?>" />
<input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br>
<input type="submit" value="Save" class="btn btn-success" style="width:70px;">
<!-- <button type="submit" class="btn btn-success" name="" id="">Save</button>-->
<button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
//姓氏从这里开始
<div class="panel panel-default">
<div class="panel-heading row">
<div class="col-md-4 col-sm-4 col-xs-4">Last Name</div>
<div id="lname"> </div>
<div class="col-md-4 col-sm-4 col-xs-4 ellipsis"><?php echo $row->last_name; ?></div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<div class="col-md-4 col-sm-4 col-xs-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7 col-md-offset-2 text-center">
<label class="col-md-4">Last Name</label>
<div class="col-md-8">
<input type="hidden" name="last_name" id="last_name" value="<?php echo $row->last_name; ?>" />
<input type ="text" name="last_name" id="last_name" class="form-control" value="<?php echo $row->last_name; ?>"/></br>
<input type="submit" value="Save" class="btn btn-success" style="width:70px;">
<!-- <button type="button" class="btn btn-success">Save</button>-->
<button type="button" data-target="#collapseTwo" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
脚本：
<script>
$(document).ready(function () {
$('#data_form').on('submit', function (e) {
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_basicinformation_edit',
data: form_data,
success: function (data)
{
$('#fname').html(data.first_name);// data here fname
$('#lname').html(data.last_name);
**here i want to display the database values first name**
},
error: function ()
{
alert('failed');
}
});
e.preventDefault();
});
});
</script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？