客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
$('#id-tapd-toolbar').find('.for_submit').each(function() {
var ele_submit = document.getElementById('save' + this.id);
$(this).click(function() {
var attachment_p = $('.attach_field_1');
if(attachment_p.length != 0){
var new_form_action = $('#bug_form').attr('action').replace(/submit/, 'ajax_submit');
var editor = TFL.editor.getInstance("BugDescription");
var description = editor.html();
$('#BugDescription').text(description);
jQuery.ajax({
url: new_form_action, // 提交的页面
data: $('#bug_form').serialize(), // 从表单中获取数据
type: "POST", // 设置请求类型为"POST"，默认为"GET"
beforeSend: function() // 设置表单提交前方法
{
// 按钮灰化
},
error: function(request) { // 设置表单提交出错
alert(<?php t("failed to submit the form ,please try it later.") ?>);
},
success: function(msg) {
var cacheKey = msg;
var old_url = $('#bug_form').attr('action');
var new_url = old_url + "&cache_key=" + cacheKey;
$('#bug_form').attr('action', new_url); //更新表单的action，带上cache用于回显
ele_submit.click();
}
});
} else{
ele_submit.click();
}
});
});
可能注释会影响到代码的阅读。我就按照代码的顺序，简单的说一下思路。
首先，变量ele_submit得到提交按钮的ID，如果当前包含附件提交的话，那么将表单提交的url改为ajax_submit。变量description是对富文本框的特殊处理。jQuery.ajax（）是接下来的重点。可见ajax方法的参数就是一些key/value值，简单明了。url指明提交的页面；data指明提交时包含的数据；type表明请求类型；beforeSend是提交前的方法，例如对页面元素和数据的处理等；error指明提交失败后执行的内容，譬如弹窗报错等；success指明提交成功后的执行内容，参数即为响应数据。
重点看一下success里面的方法。显然ajax_submit请求会返回一段缓存key值cache_key，并加在表单的旧url上，最后进行表单提交。应该是清晰明了的代码吧。
下面贴下服务器端的代码：
function ajax_submit(){
$ajax_result = array();
$this->layout = "ajax";
$cache_key = 'SUBMIT_BUG_WITH_ATTACHMENT_' . time();
MyCache::add($cache_key, $this->data, '+5 mins');
echo $cache_key;
exit;
}
很简单，用post过来的数据生成一个缓存，并将缓存key响应回去给ajax的success方法。
接下来，是当失败后回填数据的代码，也很简单，只要保证数据字段对应就行了。
if(isset($this->params['url']['cache_key'])){ //第一次提交后会有cache_key，用以保存表单数据
$temp_key = $this->params['url']['cache_key'];
$old_data = MyCache::get($temp_key);
$this->set("old_data", $old_data);
if(isset($old_data['BugStoryRelation']['BugStoryRelation_relative_id'])){
$fields['BugStoryRelation_relative_id']['default']=$old_data['BugStoryRelation']['BugStoryRelation_relative_id'];
}
foreach ($old_data['Bug'] as $key => $value) { //用cache里面的数据更新fields，保证当数据过大时数据能正确回显 by jeremy
if(!empty($value) && array_key_exists($key, $fields)){
if(is_array($value)){
$fields[$key]['default'] = $value[0];
} else{
$fields[$key]['default'] = $value;
}
}
}
}
还有一些特殊需要处理的地方，不是本文的重点，就不列举了。
总之，这是一次很好的Ajax实践，jQuery封装的很好，在实现的过程中，暴露了自己对前端技术知识的漏洞，以后要找机会慢慢加强这方面的锻炼。
另外，三天后就离开腾讯结束自己的实习生活了，心有不舍，自己也在腾讯的代码库中留下了自己的印迹，不知道能保存多久呢。。。此时正在为导出Excel的一个问题伤神。在测试环境上好用，在正式环境下出问题，Bug都不好定为，真是蛋疼。。。。
|
2022-08-19
2022-07-30
2022-08-17
2022-11-06
2022-08-17
PacktPublishing/Python-Machine-Learning-Second-Edition: Python Machine Learning
sussillo/hfopt-matlab: A parallel, cpu-based matlab implemention of the Hessian
win7系统电脑使用过程中有不少朋友表示遇到过win7系统USB驱动器RAM的状况，当出现win7
由于贪方便，用idhttp控件实现POST部分。结果发现频繁提交的时候总产生10054等N多不可
emersion/go-ostatus: An OStatus library written in Go
This vulnerability allows remote attackers to execute arbitrary code on affected
** REJECT ** DO NOT USE THIS CANDIDATE NUMBER. ConsultIDs: none. Reason: This ca
elipapa/markdown-cv: a simple template to write your CV in a readable markdown f
zju-sclab/NDT-library: These is ndt library for ndt_mapping and ndt_localization
the-engine-room/library: Our learnings about using data and technology for socia
请发表评论