[英]Jquery injecting html doesn't work. the ajax call is unstable
我是jquery和ajax的新手。 我有两个问题。 我有以下html层次结构;
<div id="tasks">
<!-- I want to inject another div task_element and change the values inside -->
<div id="task_element">
<section class="actionframe"> ...
<nav class="commentsDetail"> ...
</div>
<div id="task_element">
....
</div>
</div>
html中的注解注入是通过单击html按钮来处理的。 我有以下jQuery来处理事件;
$('.addTaskBtn').click(function() {
if(!$('#add_task_name').val())
{
$('.dropinput nav').slideUp(300);
return false;
}
else
{
// call ajax
var $task_name = $('#add_task_name').val();
var $task_date_time = $('#add_task_date').val();
var $task_location = $('#add_task_location').val();
var $add_task = 'add_task';
var sent_data = {
"op": $add_task ,
"task_name" : $task_name,
"task_date_time" : $task_date_time,
"task_location" : $task_location
};
var $out = JSON.stringify(sent_data);
$.ajax({
type: 'POST',
url: 'ajax_service.php',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: $out,
success: function() {
//$('.dropinput nav').slideUp(300);
// append jquery div
//window.location.reload();
$('#add_task_name').val('');
$('#add_task_date').val('');
$('#add_task_location').val('');
$('.dropinput nav').slideUp(300);
$('#tasks').closest('#task_element').prependTo('#tasks');
},
error: function(xhr, ajaxOptions ,thrownError) {
console.log(xhr);
console.log(thrownError);
}
});
}
});
第一个问题显然是我无法实现html中的注入。 第二个问题是,当我更改成功函数中的代码时,ajax_service变得不稳定工作。 所谓不稳定,是指在第一次单击按钮时它可以正常工作,但在下一次单击中则根本不起作用(反之亦然),并且会引发内部服务器错误。
有解决问题的想法吗?
在成功函数中更改ui是错误的吗?
PS:我几乎可以肯定ajax_service.php可以正常工作
编辑:基于评论,我将添加ajax_service.php;
...some session variables and includes other php files here ...
$data = file_get_contents('php://input');
$data = json_decode($data, true);
if($data['op'] == 'add_task')
{
$task_name = $data['task_name'];
$task_location = $data['task_location'];
$task_date_time = $data['task_date_time'];
$task_date_time = trim($task_date_time);
if($task_date_time != "")
{
$date_time = explode(" ", $task_date_time);
$task_date = "'".$date_time[0]."'";
$task_time = "'".$date_time[1]."'";
if(trim($task_date) == "''")
{
$task_date = 'NULL';
}
if(trim($task_time) == "''")
{
$task_time = 'NULL';
}
if( ($task_date == 'NULL'))
{
$task_time = "'".$date_time[0]."'";
}
}
else
{
$task_date = 'NULL';
$task_time = 'NULL';
}
// 0 : history, 1 : today, 2 : later
// compare browser time and task_date and define $time3 variable
$task_time3 = 1;
if(isset($task_name))
{
if($task_location == "")
{
$task_location = NULL;
}
$result_add_task = add_task($profile_id, $task_name, $task_location, $task_date, $task_time3, $task_time);
if($result_add_task['result'])
{
$return['error'] = false;
$return['msg'] = $result_add_task['description'];
$return['op'] = 'add_task';
}
else
{
$return['error'] = true;
$return['msg'] = $result_add_task['description'];
$return['op'] = 'add_task';
}
}
else
{
$return['error'] = true;
$return['msg'] = 'task_name is empty';
$return['op'] = 'add_task';
}
echo json_encode($return);
}
我认为部分问题可能出在此代码中
function() {
//$('.dropinput nav').slideUp(300);
// append jquery div
//window.location.reload();
$('#add_task_name').val('');
$('#add_task_date').val('');
$('#add_task_location').val('');
$('.dropinput nav').slideUp(300);
$('#tasks').closest('#task_element').prependTo('#tasks');
我认为这应该是
function(data) {
//$('.dropinput nav').slideUp(300);
// append jquery div
//window.location.reload();
$('#add_task_name').val('');
$('#add_task_date').val('');
$('#add_task_location').val('');
$('.dropinput nav').slideUp(300);
$('#tasks').prepend(data);
因为您想将从php应用程序获取的数据插入到#tasks div下的div列表中。 该函数的data参数保存您从服务器端应用程序(在本例中为ajax_service.php)取回的响应数据。
内部服务器错误提示ajax_service.php无法正常工作。 原则上可以在成功函数中更改ui。 但是,从您的代码中,我无法轻易发现您要执行的操作。 根据我的评论,您正在尝试将以下形式的任务添加到#tasks
<div id="task_element">
<section class="actionframe"> ...
<nav class="commentsDetail"> ...
</div>
如果是这种情况,您可能想要创建一个新的div并像这样附加它
var div = '<div id="task_element"><section class="actionframe">' + whatever_data_has_been_returned_from_server + '<nav class="commentsDetail"></div>'
$('#tasks').prepend($(div))
而不是这部分代码
$('#add_task_name').val('');
$('#add_task_date').val('');
$('#add_task_location').val('');
$('.dropinput nav').slideUp(300);
$('#tasks').closest('#task_element').prependTo('#tasks');
我已经弄清楚ajax调用的不稳定。 我在ajax调用之后将return false
,并禁用cache : false
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.