BlogJava-java随记-随笔分类-Ajaxhttp://www.blogjava.net/fool/category/12630.html坚持就是胜利!zh-cnMon, 11 Sep 2017 21:12:12 GMTMon, 11 Sep 2017 21:12:12 GMT60js外部调用更新angularjs的ng-repeat视图问题 http://www.blogjava.net/fool/archive/2017/09/11/432808.html傻 瓜傻 瓜Mon, 11 Sep 2017 13:37:00 GMThttp://www.blogjava.net/fool/archive/2017/09/11/432808.htmlhttp://www.blogjava.net/fool/comments/432808.htmlhttp://www.blogjava.net/fool/archive/2017/09/11/432808.html#Feedback0http://www.blogjava.net/fool/comments/commentRss/432808.htmlhttp://www.blogjava.net/fool/services/trackbacks/432808.html新table中数据就有些麻烦。所以用angularjs重构一下。
页面中angularjs展示数据  
<body   ng-controller="multi"> 
  <table id="baseTable" class="table table-striped table-bordered table-hover" >
<thead>
<tr><th style="width:10%" class="center">标题</th>
</tr>
</thead>
               <body   ng-controller="multi">   
                <tbody>  
                         <tr ng-repeat="item in defaultData " >
                             <td class='center hidden-480'>{{item.title}}</td>    
               </tr> 
  </tbody>
            </body>
  </table>
</body>
外部jquery的ajax调用更新数据 
                    var controllerScope = $('body[ng-controller="multi"]').scope();
            controllerScope.defaultData=results;
            controllerScope.$apply();
          
注意：外部js不要删除了下面这段代码块。
                        <tr ng-repeat="item in defaultData " >
                             <td class='center hidden-480'>{{item.title}}</td>    
                 </tr> 


傻 瓜 2017-09-11 21:37 发表评论
]]>ext 之EditorGridPanel: 使用dwr完成保存操作http://www.blogjava.net/fool/archive/2008/07/09/213494.html傻 瓜傻 瓜Wed, 09 Jul 2008 00:54:00 GMThttp://www.blogjava.net/fool/archive/2008/07/09/213494.htmlhttp://www.blogjava.net/fool/comments/213494.htmlhttp://www.blogjava.net/fool/archive/2008/07/09/213494.html#Feedback1http://www.blogjava.net/fool/comments/commentRss/213494.htmlhttp://www.blogjava.net/fool/services/trackbacks/213494.html这是一个关于dwr和使用ext进行编辑的例子,ext初搞，头大.感觉ext学习起来有些麻烦

bean类

package table;
import java.util.Date;

public class ExtBean {
 private String common;

 

    private String light;
   
 private float price; // automatic date conversions

 private Date availDate;

 private boolean indoor;

 public ExtBean() {
 }
 
 public ExtBean(String common,  String light, float price, Date availDate, boolean indoor) {
     this.common = common;

  this.light = light;
  this.price = price;
  this.availDate = availDate;
  this.indoor = indoor;
 }

 public Date getAvailDate() {
  return availDate;
 }

 public void setAvailDate(Date availDate) {
  this.availDate = availDate;
 }

 

 public String getCommon() {
  return common;
 }

 public void setCommon(String common) {
  this.common = common;
 }

 public boolean isIndoor() {
  return indoor;
 }

 public void setIndoor(boolean indoor) {
  this.indoor = indoor;
 }

 

 public float getPrice() {
  return price;
 }

 public void setPrice(float price) {
  this.price = price;
 }

 public String getLight() {
  return light;
 }

 public void setLight(String light) {
  this.light = light;
 }

 

}


dwr处理类:

package table;

import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import org.apache.log4j.Logger;
public class ExtBeanModel {
 private static Logger logger = Logger.getLogger(ExtBeanModel.class.getName());
 public ExtBeanModel() {
  
  // TODO Auto-generated constructor stub
 }
 
 public String save(List<ExtBean> extBeans) throws Exception{
  logger.debug("start");
  for(Iterator<ExtBean> it = extBeans.iterator(); it.hasNext();){
   ExtBean extBean = it.next();
   System.out.println(extBean.getCommon() + "  "
     + extBean.getLight()+" "
     + extBean.getAvailDate()+ " " + extBean.getPrice() +  " "
     + extBean.isIndoor());
  }
  
  return "ok";
 }
 
 public List<ExtBean> getExtBeans(){
  List<ExtBean> extList = new ArrayList<ExtBean>();
  ExtBean ext1 = new ExtBean("Erythronium","测试1",9.6F,new Date(),false);
  ExtBean ext2 = new ExtBean("Erythronium2","测试2",9.6F,new Date(),true);
  extList.add(ext1);
  extList.add(ext2);
  return extList;
 }

}



dwr的配置文件dwr.xml
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
 <allow>
  <create creator="new" javascript="extModel">
   <param name="class" value="table.ExtBeanModel" />
  </create>
  <convert match="table.ExtBean" converter="bean"></convert> 
 </allow>
 <signatures>
     <![CDATA[
      import java.util.List;
      import table.ExtBean;
      import table.ExtBeanModel;
      ExtBeanModel.save(List<ExtBean>);
      ]]>
 </signatures>  
</dwr>

jsp页面:

<%@ page language="java"  pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

  <script type='text/javascript' src='dwr/util.js'></script>
  <script type='text/javascript' src='dwr/engine.js'></script>
  <script type='text/javascript' src='dwr/interface/extModel.js'> </script>
  <script>
  //dwr回调方法 保存数据   
  function save(record){
   
    var objArray = new Array();
    //把ext的Record[]数组转换成 js对象数组
          for(ix = 0 ; ix < record.length;ix++){
              var tmp = record[ix];
           
              var obj={
                  common:tmp.get('common'),
                  light:tmp.get('light'),
                  price:tmp.get('price'),
                  availDate:tmp.get('availDate'),
                  inddor:tmp.get('inddor')
                  };
    
              objArray[ix]=obj;

             }
    extModel.save(objArray,addItemCb);
   
    }
   
    function addItemCb(data)
                {
              if (data != null )
                 {
                   alert("ok");

                   }
              else
                 {
                  alert("failure");
                 }
               }
  </script>
</head>
<body>
<script>
Ext.onReady(function(){
   
    Ext.QuickTips.init();

    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };
    // shorthand alias
    var fm = Ext.form;

 

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)

    var cm = new Ext.grid.ColumnModel([{
           id:'common',
           header: "名称",
           dataIndex: 'common',
           width: 100,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           header: "明亮度",
           dataIndex: 'light',
           width: 130,
           editor: new Ext.form.ComboBox({
               typeAhead: true,
               triggerAction: 'all',
               transform:'light',
               lazyRender:true,
               listClass: 'x-combo-list-small'
            })
        },{
           header: "价格",
           dataIndex: 'price',
           width: 70,
           align: 'right',
           renderer: 'usMoney',
           editor: new fm.NumberField({
               allowBlank: false,
               allowNegative: false,
               maxValue: 100000
           })
        },{
           header: "使用时间",
           dataIndex: 'availDate',
           width: 95,
           renderer: formatDate,
           editor: new fm.DateField({
                format: 'm/d/y',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: 'Plants are not available on the weekends'
            })
        }
    ]);

    // by default columns are sortable
    cm.defaultSortable = true;

    // this could be inline, but we want to define the Plant record
    // type so we can add records dynamically
    var extBean = Ext.data.Record.create([
           // the "name" below matches the tag name to read, except "availDate"
           // which is mapped to the tag "availability"
           {name: 'common', type: 'string'},       
           {name: 'light'},
           {name: 'price', type: 'float'},             // automatic date conversions
           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
           {name: 'indoor', type: 'bool'}
      ]);

    // create the Data Store
    var store = new Ext.data.JsonStore({
        // load using HTTP
 
       autoLoad:false,
     
       fields: ['common', 'light', 'price', 'avaiDate','indoor'],

        sortInfo:{field:'common', direction:'ASC'}
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width:600,
        height:300,
        autoExpandColumn:'common',
        title:'Edit Plants?',
        frame:true,
 
        clicksToEdit:1,

        tbar: [{
            text: '增加',
            handler : function(){
                var p = new extBean({
                    common: 'New Plant 1',
                    light: 'Mostly Shade',
                    price: 0,
                    availDate: (new Date()).clearTime(),
                    indoor: false
                });
                grid.stopEditing();
                store.insert(0, p);
                grid.startEditing(0, 0);
            }
        },
        {
        //保存数据
         text: '保存',
         handler : function(){
               //取得datasource对象 然后返回修改行的记录对象Record[]数组
         var record = grid.getStore().getModifiedRecords();
          // : Ext.data.Record[]

         save(record);
           }
       
         }]
        

        
    });
   

   
    extModel.getExtBeans(extBeanArray);
 function extBeanArray(data){
           for(var ix = 0; ix < data.length;ix++){
                  var tmp = data[ix];
                  var p = new extBean({
                    common: tmp.common,
                    light: tmp.light,
                    price: tmp.price,
                    availDate: tmp.availDate,
                    indoor: tmp.inddor
                   });
               store.insert(ix, p);
            }
        
         }
    store.load();
});


</script>


  
<select name="light" id="light" style="display: none;">
 <option value="Shade测试">shade测试</option>
 <option value="Mostly Shady">Mostly Shady</option>
 <option value="Sun or Shade">Sun or Shade</option>
 <option value="Mostly Sunny">Mostly Sunny</option>
 <option value="Sunny">Sunny</option>
</select>
<div id="editor-grid"></div>
</body>
</html>



傻 瓜 2008-07-09 08:54 发表评论
]]>利用jaxp dom 实现 ajax xml 响应http://www.blogjava.net/fool/archive/2006/06/29/55764.html傻 瓜傻 瓜Thu, 29 Jun 2006 08:06:00 GMThttp://www.blogjava.net/fool/archive/2006/06/29/55764.htmlhttp://www.blogjava.net/fool/comments/55764.htmlhttp://www.blogjava.net/fool/archive/2006/06/29/55764.html#Feedback0http://www.blogjava.net/fool/comments/commentRss/55764.htmlhttp://www.blogjava.net/fool/services/trackbacks/55764.html在某些情况下用 jaxp dom api 实现ajax xml响应会是一个很好的选择,可以简化程序.需要用到的jar包javax.xml.parsers.*; org.w3c.dom.*;javax.xml.transform.*;javax.xml.transform.stream.*;javax.xml.transform.dom.*;
前两个包用来创建xml文档,后面几个用来转换到输出流. 以下简要说明用到的方法.然后贴出一个完整实例.
创建新文档             DocumentBuilderFactory factory = DocumentBuilderFactory.
                                             newInstance();
            DocumentBuilder builder = factory.newDocumentBuilder();
           
            Document doc = builder.newDocument();
创建root元素 或其它元素            Element root = doc.createElement("selects");
创建根元素                doc.appendChild(root);  Element的appendChild()方法用来添加子元素
创建文本结点          doc.createTextNode(String textNode)
在servlet中 通过以下方法转换到输出流            Transformer t = TransformerFactory.newInstance().newTransformer();            t.transform(new DOMSource(doc),
                        new StreamResult(response.getWriter()));



web.inf 文件配置一个servlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2eehttp://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
  <display-name>WebModule1</display-name>
  <servlet>
    <servlet-name>selectservlet</servlet-name>
    <servlet-class>drownmenu.SelectServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>selectservlet</servlet-name>
    <url-pattern>/selectservlet</url-pattern>
  </servlet-mapping>
</web-app>

jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"%>

<html>
  <head>
    <title>Ajax 联动下拉框</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <SCRIPT type="text/javascript">
        var req;
        window.onload=function(){
        }

        function Change_Select()
        {
            var zhi=document.getElementById('state').value;
            var url="selectservlet?id="+escape(zhi);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }

            if(req)
            {
                req.open("GET",url,true);
                req.onreadystatechange=callback;
                req.send(null);
            }
        }

        function callback()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }

        function parseMessage()
        {
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('city');
            select_root.options.length=0;

            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }


        }
    </SCRIPT>
  </head>

  <body>
    <div align="center">
        <form name="form1" method="post" action="">
            <TABLE width="70%" boder="0" cellspacing="0">
                <TR>
                    <TD align="center">Ajax 联动下拉框</TD>
                </TR>
                <TR>
                    <TD>请选择省份:
                        <SELECT name="state" id="state" onChange="Change_Select()">
                            <OPTION value="0">未选择</OPTION>
                            <OPTION value="1">湖南</OPTION>
                            <OPTION value="2">湖北</OPTION>

                        </SELECT>
                        请选择城市:
                        <SELECT name="city" id="city">
                            <OPTION value="0">未选择</OPTION>
                        </SELECT>
                    </TD>
                </TR>
                <TR><td>&nbsp;</td></TR>
            </TABLE>
        </form>
    </div>
  </body>
</html>

SelectServlet 类
package drownmenu;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
import javax.xml.parsers.*;
import org.w3c.dom.*;
import javax.xml.transform.*;
import javax.xml.transform.stream.*;
import javax.xml.transform.dom.*;


public class SelectServlet extends HttpServlet {

    //Initialize global variables
    public void init() throws ServletException {
    }

    //Process the HTTP Get request
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {

        String targetId = request.getParameter("id").toString();
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/xml");
        try {
            DocumentBuilderFactory factory = DocumentBuilderFactory.
                                             newInstance();
            DocumentBuilder builder = factory.newDocumentBuilder();
           
            Document doc = builder.newDocument();
         
            Element root = doc.createElement("selects");
            doc.appendChild(root);

            /*
                        String xml_start="<selects>";
                        String xml_end="</selects>";
                        String xml="";*/
            if (targetId.equalsIgnoreCase("0")) {

                makeElement(doc, root, new String[] {"未选择"});
                // xml =    "<select><value>0</value><text>Unbounded</text></select>";
            }
            if (targetId.equalsIgnoreCase("1")) {
                makeElement(doc, root, new String[]  {"长沙","岳阳"});


                /* xml =
                 "<select><value>1</value><text>Mana Burn</text></select>";
                 xml +=
                 "<select><value>2</value><text>Death Coil</text></select>";
                 xml +=
                 "<select><value>3</value><text>Unholy Aura</text></select>";
                 xml +=
                 "<select><value>4</value><text>Unholy Fire</text></select>";
                 */
            }
            if (targetId.equalsIgnoreCase("2")) {
                makeElement(doc, root, new String[] {"武汉","石堰","襄樊","孝感"});
                /*
                  xml =
                 "<select><value>1</value><text>Corprxplode</text></select>";
                  xml +=
                 "<select><value>2</value><text>Raise Dead</text></select>";
                  xml +=
                 "<select><value>3</value><text>Brilliance Aura</text></select>";
                  xml +=
                 "<select><value>4</value><text>Aim Aura</text></select>";
                 */
            } //else {
             
                /*
                   xml =
                 "<select><value>1</value><text>Rain of Chaos</text></select>";
                   xml +=
                 "<select><value>2</value><text>Finger of Death</text></select>";
                 xml += "<select><value>3</value><text>Bash</text></select>";
                   xml +=
                 "<select><value>4</value><text>Summon Doom</text></select>";
                 */
         //   }
      
            Transformer t = TransformerFactory.newInstance().newTransformer();

            t.transform(new DOMSource(doc),
                        new StreamResult(response.getWriter()));

        } catch (Exception ex) {
            throw new ServletException(ex.toString());
        }
        // String last_xml = xml_start + xml + xml_end;
        // response.getWriter().write(last_xml);
    }

    private void makeElement(Document doc, Element root, String[] name) throws
            DOMException {
        if (name == null) {
            return;
        }

        for (int i = 0; i < name.length; i++) {
            Element selectElement = doc.createElement("select");

            root.appendChild(selectElement);

            Element valueElement = doc.createElement("value");
            Element textElement = doc.createElement("text");
            int t=i+1;
            Text valueText = doc.createTextNode(""+t);           
            Text textText = doc.createTextNode(name[i]);
            valueElement.appendChild(valueText);
            textElement.appendChild(textText);
            selectElement.appendChild(valueElement);
            selectElement.appendChild(textElement);
           

        }

    }

    //Process the HTTP Post request
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        doGet(request, response);
    }

    //Clean up resources
    public void destroy() {
    }
}


欢迎加入QQ群:30406099 



傻 瓜 2006-06-29 16:06 发表评论
]]>