后台action的方法
public String getProductinfosToJson(){
String chars = ServletActionContext.getRequest().getParameter("chars");
Map<String,Object> map = new HashMap<String, Object>();
map.put("code", chars);
List list = manager.findProductinfosByMap(map);
return this.renderJsonList(list);
}
前台页面的关键代码
<input type="text" name="pcode" id="pcode"/>
<script language="js" type="text/javascript">
$("#pcode").coolautosuggest({
url:"productinfo!getProductinfosToJson.action?chars=",
showThumbnail:false,
showDescription:true,
//photopath:'${ctx}/upload/productinfo/',
onSelected:function(result){
// Check if the result is not null
if(result!=null){
$("#pid").val(result.id);
$("#pname").val(result.name);
$("#pcode").val(result.code);
$("#pmoney").val(result.money);
$("#imgShowExpertPhoto2").attr('src',"${ctx}/upload/productinfo/" + result.photo );
}
else{
$("#pid").val("");
$("#pcode").val("");
$("#pname").val("");
$("#pmoney").val("");
$("#imgShowExpertPhoto2").attr('src',"${ctx}/upload/common/NoExpertPhoto.JPG");
}
}
});
function clearImg(){
$("#imgShowExpertPhoto2").attr('src',"${ctx}/upload/common/NoExpertPhoto.JPG");
}
function addDetail(){
var pid=$("#pid").val();
if(pid==""||pid==null){
alert("请选择有效的商品,在进行添加!");
return false;
}
$.ajax({
type: 'POST',
url: "setmealProductinfo!save.action",
dataType: "from",
data:$("#inputForm").serialize(),//"inputForm";
success: function(msg){
if(msg.length>0){
alert(msg);
$("#inputForm")[0].reset();
$("#imgShowExpertPhoto2").attr('src',"${ctx}/upload/common/NoExpertPhoto.JPG");
}
else
window.location.href="setmeal!view.action?id=${id}";
}
});
}
function delSetmealProductinfo(id){
$.ajax({
type: 'POST',
url: "setmealProductinfo!delete.action?id="+id,
success: function(){
window.location.href="setmeal!view.action?id=${id}";
}
});
}
</script>
我在1.2.0版本的jquery中加入了json的解析方法。(jquery.js)
附件中有我做的java例子和原来的Demo。
参考网址:http://www.open-lib.com/Type/159-1.jsp ,有大量好用的jquery控件
参考网址:http://wenku.baidu.com/view/b7dadf4fc850ad02de804184.html,将list转为json。
有图有真相