ecshop中ajax.call使用

ajax.call封装在js目录下transport.js这个文件.里面

<script type=”text/javascript”>// <![CDATA[
function colour_label(val,id)
{
   Ajax.call(“goods.php?act=img_label”, “label=” val “&#038;&id=” id, addresscolour_label , “POST”, “JSON”,false);
}

ajax.call后面的参数分别是(请求的URL地址,发送参数,回调函数,请求的方式,有”GET”和”POST”两种,响应类型,有”JSON”、”XML”和”TEXT”三种,是否异步请求的方式,是否安静模式请求)

function addresscolour_label(result)
{
    if(result == “true”)
    {

        alert(result.label);
        for (var one in result.colour_label)
        {
             laert(result.colour_label[one].img_id);
        }
    }
}

的result参数就是goods.php?act=img_label这里输出响应结果.下面是结果

{
“label”:”\u9ed1\u8272″,
“colour_label”:
  [
    {
       “img_id”        : “1012”,
       “img_url”       : “images\/201309\/goods_img\/439_P_1380475365329.jpg”,
       “thumb_url”     : “images\/201309\/thumb_img\/439_thumb_P_1380475365276.jpg”,
       “img_desc”      : “\u68d5\u8272”,
       “goods_id”      : “439”,
       “goods_attr_id” : “2435”
     },
     {
       “img_id”        : “1006”,
       “img_url”       : “images\/201309\/goods_img\/439_P_1380475364611.jpg”,
       “thumb_url”     : “images\/201309\/thumb_img\/439_thumb_P_1380475364120.jpg”,
       “img_desc”      : “\u767d\u8272”,
       “goods_id”      : “439”,
       “goods_attr_id” : “2457”
     },
     {
       “img_id”        : “1009”,
       “img_url”       : “images\/201309\/goods_img\/439_P_1380475365389.jpg”,
       “thumb_url”     : “images\/201309\/thumb_img\/439_thumb_P_1380475365508.jpg”,
       “img_desc”      : “\u9ed1\u8272”,
       “goods_id”      : “439”,
       “goods_attr_id” : “2434”
     }
  ],
“attr_price”:12
}
<script>

php 文件
if($_REQUEST[“act”] == “img_label”)
{
    include_once(“includes/cls_json.php”);
    $json      =   new JSON;

    $label     =   $_REQUEST[“label”];
    $goods_id  =   $_REQUEST[“id”];

    $result[“label”] = $label;
    $sql = “SELECT a.img_id, a.img_url, a.thumb_url, a.img_desc, a.goods_id, b.goods_attr_id” .
           ” FROM ” . $GLOBALS[“ecs”]->table(“goods_gallery”) .” as a “.
    ” left join  “. $GLOBALS[“ecs”]->table(“goods_attr”) .” as b on(a.goods_id = b.goods_id and a.img_desc= b.attr_value ) “.
           ” WHERE a.goods_id = “$goods_id” and a.img_label = “1” group by a.img_desc asc “;
    $result[“colour_label”] = $GLOBALS[“db”]->getAll($sql);

    die($json->encode($result));
}
// ]]></script>

AJAX初学者篇

AJAX纠结了本人许久阿,纠结过后,当功能实现的内一刻,是豁然开朗,感觉编程当遇到自己不会的东西时,就好像把自己关在一个小黑屋里,什么都看不见,只能一点点摸索,可能会走错路,可能会找不到方向,心里很烦躁很纠结,但是当自己摸到门,打开门,看到外面阳光明媚的时候,所有烦恼都烟消云散了。

我是这么理解AJAX的,可能理解的只是表面的一些概念,要深入熟练应用还需要多多的练习呢~

AJAX不是什么编程语言,是需要和其他语言结合应用的一种技术,它解决了其他很多语言解决不了的问题,

代表性的    1. 页面无刷新的动态数据交换  2.局部刷新页面  3.界面的美观(增强用户体验)

我做的主要是验证用户名部分,给大家看下代码,有不足的地方希望给些建议。

用户名:
<input type=”text”  name=”username” id=”username” onblur=”user_name()”/>
<span id=”user_name” style=”color:red;font-size:12px;”></span>

 

function user_name()    //判断用户名
{
var user = document.getElementById(“username”);  //获取用户名id
var usermessage = document.getElementById(“user_name”);  //获取span的id

var user_match = /^[a-zA-Z0-9_] $/;  //验证格式只能是字母数字下划线组成

if(user.value.length==0)
{
usermessage.innerHTML=”* 账号不能为空”;

user.style.border=”2px solid red”;

return false;
}else
{

if (user.value.length < 6 || user.value.length > 20 )
{
usermessage.innerHTML=”* 用户名长度不少于 6 字节不超过 20 字节!”;
user.style.border=”2px solid red”;
return false;

}
if (!user.value.match(user_match))
{
usermessage.innerHTML=”* 用户名只能由字母数字下划线组成”;
user.style.border=”2px solid red”;
return false;
}
showHint(user.value);     //当前3项都符合条件时,执行的函数
if(usermessage.innerHTML!=”√”)
{
return false;
}
usermessage.innerHTML=”√”;
user.style.border=”1px solid #cccccc”;
return true;
}
}

 

var xmlHttp

function showHint(str)
{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)
{
alert (“您的浏览器不支持AJAX!”);
return;
}

var url=”ajax.php”;     //定义回传数据的服务器的 url(文件名)
url=url “?user_name=” str;      //使用文本框的内容向 url 添加参数(user_name)
xmlHttp.onreadystatechange=stateChanged;     //创建一个 XMLHTTP 对象,并告知此对象当某个改变被触发时执行名为 stateChanged 的函数
xmlHttp.open(“GET”,url,false);  //向服务器发送一个 HTTP 请求
xmlHttp.send(null);//  如果输入域为空,此函数仅仅会清空 user_name 占位符的内容
}

function GetXmlHttpObject()    /*上面可调用名为 GetXmlHttpObject() 的函数。

此函数的作用是解决为不同浏览器创建不同的 XMLHTTP 对象的问题。*/
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0 , Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}

return xmlHttp;
}

function stateChanged()   //每当 XMLHTTP 对象的状态发生改变时,stateChanged() 函数就会执行。当状态变更为 4(“完成”)时,user_name 占位符的内容就被响应文本来填充。
{
if (xmlHttp.readyState == 4)
{
if(xmlHttp.responseText == “false”)
{

document.getElementById(“user_name”).innerHTML=”* 用户名已存在”;
document.getElementById(“username”).style.border=”2px solid red”;
return false;

}
else
{    document.getElementById(“user_name”).innerHTML=”√”;
document.getElementById(“username”).style.border=”1px solid #cccccc”;
return true;

}
}
}

 

AppCan 中的AJAX通讯实践

手机应用开发必不可少的就是与网络进行交互。常见的与网络交互都是通过http或https请求方式。这两种方式在以浏览器引擎为核心的Appcan平台中,都是支持的。为了减少数据大小,建议在与网络数据传输时采用json数据格式。
在浏览器中,用异步方式(Ajax)在A网站访问B网站的接口,这种行为被认为是不安全的。为什么呢?想象一个场景:通过Ajax异步请求别的网站接口,返回一个字符串,字符串内容为”<script>//dosomething</script>”,那么这个数据内容就危险了,浏览器会执行<script>标签里面的js代码。这种方式就是所谓的”跨域访问”。这种限制是浏览器做的,其实请求数据已经返回回来。
那么,如何解决跨域访问问题呢,可有几种解决方式
利用第三方网站,比如委托给google网站,google提供了一套跨域访问的js库。
Jquery的$.getJSON方法,这种需要返回数据格式为json格式
在返回头的content-type中设置为application/json
利用Appcan的Native模式开发的widget,也是属于跨域访问的范畴,因此,也会碰到上述情况,这里介绍两种Appcan中的解决方案:
一、Jquery的$.getJSON(url,function(data){});第一个参数是url获取数据地址,第二个参数成功取得数据时调用;
其中,url中必须带有jsoncallback参数,参数值为”?”,Jquery会在请求时替换为一个随机的唯一数:
http://xxxx.php?jsoncallback=?&name1=value1&name2=value2
用$.getJSON时,数据的返回格式要是xxx({“a”:”1″,”b”:”2″})
例如:
xxx({“status”:”true”,”listData”:[{“id”:”261803″,”title”:”虚拟投影键盘”,”name”:”前沿科技”,”summary”:”这款虚拟投影键盘设计独特,每一个敲击都不会相互干扰,可以同时接受。”},{“id”:”261994″,”title”:”科学家发现”最大黑洞””,”name”:”环球快递”,”summary”:”美国加州大学伯克利分校的天文学家尼古拉斯•麦克康纳尔和他的同事发现了两个目前已知最大的黑洞。”}}]})
注意:需验证{“a”:”1″,”b”:”2″}json格式的正确性,可在jsonlint.com网站上验证,如果格式不合法将获取不到数据
 
服务器端需要返回
echo  $[“jsoncallback”].”(“.json_encode($data).”)”; $data为PHP数组
 
二、Appcan封装的uexXmlHttpMgr对象方法如下:
uexXmlHttpMgr.open(String inXmlHttpID, String inMethods, String inUrl);第一个参数:

inXmlHttpID:异步请求操作ID;必须值。(随机不重复)

第二个参数:

inMethods:异步请求类型;(get,post)

第三个参数:

inUrl:异步请求地址;
通过uexXmlHttpMgr.onData函数获取值。
uexXmlHttpMgr.onData(inOpCode,inResult)
inOpCode:操作ID,由发起请求时传入的值,随机不重复;
inResult:服务器返回的任意数据;String类型。
使用方式:

function xmlHttp (){
             var url = document .getElementById ( “add”). value ;
             uexXmlHttpMgr .open (1 , “GET” , url ,“” );
             uexXmlHttpMgr .send (1 );
       }
       function httpSuccess (opid ,status ,result ){
             if (status ==1 ){
             uexXmlHttpMgr .close (1 );
             document .getElementById ( “adre”). value   = result ;
          }
       }

       window .uexOnload = function (){
             uexXmlHttpMgr .onData = httpSuccess ;
             uexWidgetOne .cbError = function( opCode , errorCode , errorInfo ){
                   alert (“errorCode:”   errorCode   “\nerrorInfo:”   errorInfo );
             }
       }
< div data-role =”header  class =” ui-header ui-bar-b ui-header-fixed ui-bar-glass >

< h1 class =”ui-title  tabindex =” 0 role =” heading aria-level=” 1 >
跨域异步请求
</ h1>
</ div>

< div id=” page_5 “ class =”ui-page ui-body-c ui-page-active  tabindex =” 0 >
< div class =”ui-content ui-body-c ui-fixed-top ui-fixed-bottom m-bottom  >
< label for =”text-6  class =” ui-input-text  >请求内容: </ label>
< textarea placeholder =”http://192.168.10.109/phdmyadmin/test.php?func=show    name =”textarea-2  id =” add class=” ui-input-text ui-body-null ui-btn-corner-all ui-shadow-inset ui-btn-d >http://192.168.10.109/phdmyadmin/test.php?func=show </ textarea>
< label for =”text-6  class =” ui-input-text  >请求结果: </ label>
< textarea placeholder =””  name =”textarea-3  id =” adre class =”ui-input-text ui-body-null ui-btn-corner-all ui-shadow-inset ui-btn-d ></textarea >
< div data-role =”button  class =” ui-btn-corner-all ui-btn  ui-btn-e  ui-shadow onclick =xmlHttp( )> < span class =” ui-btn-inner ui-btn-corner-all > <span class=” ui-btn-text “> 发送请求 </span > </ span></ div >

</ div>
</ div>

该方法返回数据只要是正确的json格式就可以;

 
<script>
       /*
       * 跨域异步post请求
       * arguments[0]请求的ID
       * arguments[1]请求php文件中的方法名
       * arguments[2]需要传输的POST键值对像
       */
       function xmlHttp()
       {
             var id    = arguments[0 ] ? arguments [0]: “0”;//真机环境下需要数字作为ID
             var func  = arguments [1] ? arguments[1 ]:“show”;
             var url     = “http://192.168.10.109/phpmyadmin/test.php?func=”  func ;//一定要加HTTP://
             uexXmlHttpMgr.open(id, “POST”, url,“” );
             if(arguments [2])
             {
                   var postKey = “”;
                   var postValue =“” ;
                   for(var key in arguments[2 ])
                   {
                         postKey = key ;
                         postValue = arguments [2][ key];
                         uexXmlHttpMgr.setPostData (id ,“0”, postKey,postValue );//post参数
                   }
             }
             uexXmlHttpMgr.send(id);
             //alert(“发送请求”)
       }
       /*
       * 查询
       */
       function httpSuccess (opid ,status ,result )
       {
             if(status == -1)
             {
                   //alert(“传输失败” )
             }
             if(status == 0)
             {
                   //alert(“正在传输”)
             }
             if(status == 1)
             {
                   //alert(“传输完成”)
                   uexXmlHttpMgr.close(opid);
                   var test = “<input type=”text” id=”content_add”>”
                                “<input type=”button” value=”添加” onclick=”insertItem()”>”;
                   var tmpl = “<div>”
                                “<input type=”text” id=”content_${index:}” value=”${content}”>”
                                “<input type=”button” value=”修改” onclick=”saveItem(${id},${index:})”>”
                                “<input type=”button” value=”删除” onclick=”deleteItem(${id},${id})”>”
                                “</div>”;         
                   var json = eval (result );
                  
                   test  = zy_tmpl (tmpl ,json ,zy_tmpl_count (json ));
                   $( “#content”).html(test);
             }
       }
       /*
       * 修改
       */
       function saveItem ()
       {
             var id = arguments [0];
             var input = $ (“#content_”  arguments[1 ]);
             var content =  input.val();
      
             xmlHttp(“1” ,“save”,{ “id”:id ,“content”: content})
       }
       /*
       * 添加
       */
       function insertItem ()
       {
             var input = $ (“#content_add”);
             var content = var  input.val();
             xmlHttp(“2” ,“insert”,{ “content”:var content })
       }
       /*
       * 删除
       */
       function deleteItem ()
       {
             var id = arguments [0];
             xmlHttp(“3” ,“delete”,{ “id”:id })
       }
       window.uexOnload = function()
       {
             uexXmlHttpMgr.onData = httpSuccess ;//请求数据成功后的回调函数
            
            
   }
</script>
<input class=”btn  type =”button value=” 开始 onclick=”xmlHttp() >
服务端PHP文件

<?php
$cfg_dbhost = “localhost”;
$cfg_dbname = “sitrust”;
$cfg_dbuser = “root”;
$cfg_dbpwd = “”;

$conn = mysql_connect($cfg_dbhost, $cfg_dbuser, $cfg_dbpwd) or die (“不能连接数据库服务器: ” . mysql_error());
mysql_select_db($cfg_dbname, $conn) or die (“不能选择数据库: ” . mysql_error());
mysql_query(“set names utf8”);
/*
**执行$_GET[“func”])传入的方法
*/
if(!empty($_GET[“func”]))
{
 $func = $_GET[“func”];
 $func();
}
/*
**查询
*/
function show()
{
 Global $conn;
 $sql = “select * from `test`”;
 $result = mysql_query($sql,$conn);
 while( $row = mysql_fetch_array($result) )
 {
  $content[] = $row;
 }
  //json数据返回客户端
  echo json_encode($content);
}
/*
**修改
*/
function save()
{
 Global $conn;
 $id = $_POST[“id”];
 $content = $_POST[“content”];
 $sql = “UPDATE `sitrust`.`test` SET `content` = “”.$content.”” WHERE `test`.`id` =”.$id;
 if(mysql_query($sql,$conn))
 { 
  show();
 }
 else
 {
  return false;
 }
}
/*
**删除
*/
function delete()
{
 Global $conn;
 $id = $_POST[“id”];
 $sql = “DELETE FROM `sitrust`.`test` WHERE `test`.`id` = “.$id;
 if(mysql_query($sql,$conn))
 { 
  show();
 }
 else
 {
  return false;
 }
}
/*
**添加
*/
function insert()
{
 Global $conn;
 $content = $_POST[“content”];
 $sql = “INSERT INTO `sitrust`.`test` (`content` ) VALUES (“”.$content.””);”;
 if(mysql_query($sql,$conn))
 { 
  show();
 }
 else
 {
  return false;
 }
}

 

AJAX学习笔记

一、json_encode()
该函数主要用来将数组和对象,转换为json格式。先看一个数组转换的例子:
  $arr = array (“a”=>1,”b”=>2,”c”=>3,”d”=>4,”e”=>5);
  echo json_encode($arr);
结果为
  {“a”:1,”b”:2,”c”:3,”d”:4,”e”:5}
再看一个对象转换的例子:
  $obj->body = “another post”;
  $obj->id = 21;
  $obj->approved = true;
  $obj->favorite_count = 1;
  $obj->status = NULL;
  echo json_encode($obj);
结果为
  {
    ”body”:”another post”,
    ”id”:21,
    ”approved”:true,
    ”favorite_count”:1,
    ”status”:null
  }
由于json只接受utf-8编码的字符,所以json_encode()的参数必须是utf-8编码,否则会得到空字符或者null。当中文使用GB2312编码,或者外文使用ISO-8859-1编码的时候,这一点要特别注意。
二、索引数组和关联数组
PHP支持两种数组,一种是只保存”值”(value)的索引数组(indexed array),另一种是保存”名值对”(name/value)的关联数组(associative array)。
由于javascript不支持关联数组,所以json_encode()只将索引数组(indexed array)转为数组格式,而将关联数组(associative array)转为对象格式。
比如,现在有一个索引数组
  $arr = Array(“one”, “two”, “three”);
  echo json_encode($arr);
结果为:
  [“one”,”two”,”three”]
如果将它改为关联数组:
  $arr = Array(“1″=>”one”, “2”=>”two”, “3”=>”three”);
  echo json_encode($arr);
结果就变了:
  {“1″:”one”,”2″:”two”,”3″:”three”}
注意,数据格式从”[]”(数组)变成了”{}”(对象)。
如果你需要将”索引数组”强制转化成”对象”,可以这样写
json_encode( (object)$arr );
或者
json_encode ( $arr, JSON_FORCE_OBJECT );
三、类(class)的转换
下面是一个PHP的类:
class Foo {
    const ERROR_CODE = “404”;
    public $public_ex = “this is public”;
    private $private_ex = “this is private!”;
    protected $protected_ex = “this should be protected”;
    public function getErrorCode() {
      return self::ERROR_CODE;
    }
  }
现在,对这个类的实例进行json转换:
$foo = new Foo;
$foo_json = json_encode($foo);
echo $foo_json;
输出结果是
{“public_ex”:”this is public”}
可以看到,除了公开变量(public),其他东西(常量、私有变量、方法等等)都遗失了。
四、json_decode()
该函数用于将json文本转换为相应的PHP数据结构。下面是一个例子:
$json = “{“foo”: 12345}”;
$obj = json_decode($json);
print $obj->{“foo”}; // 12345
通常情况下,json_decode()总是返回一个PHP对象,而不是数组。比如:
$json = “{“a”:1,”b”:2,”c”:3,”d”:4,”e”:5}”;
var_dump(json_decode($json));
结果就是生成一个PHP对象:
object(stdClass)#1 (5) {
    [“a”] => int(1)
    [“b”] => int(2)
    [“c”] => int(3)
    [“d”] => int(4)
    [“e”] => int(5)
  }
如果想要强制生成PHP关联数组,json_decode()需要加一个参数true:
$json = “{“a”:1,”b”:2,”c”:3,”d”:4,”e”:5}”;
var_dump(json_decode($json),true);
结果就生成了一个关联数组:
array(5) {

     [“a”] => int(1)
     [“b”] => int(2)
     [“c”] => int(3)
     [“d”] => int(4)
     [“e”] => int(5)
  }
五、json_decode()的常见错误
下面三种json写法都是错的,你能看出错在哪里吗?
$bad_json = “{ “bar”: “baz” }”;
$bad_json = “{ bar: “baz” }”;
$bad_json = “{ “bar”: “baz”, }”;
对这三个字符串执行json_decode()都将返回null,并且报错。
第一个的错误是,json的分隔符(delimiter)只允许使用双引号,不能使用单引号。第二个的错误是,json名值对的”名”(冒号左边的部分),任何情况下都必须使用双引号。第三个的错误是,最后一个值之后不能添加逗号(trailing comma)。
另外,json只能用来表示对象(object)和数组(array),如果对一个字符串或数值使用json_decode(),将会返回null。
var_dump(json_decode(“Hello World”)); //null
六、应用举例
1.PHP代码
$result = $_POST;
echo json_encode($result);
1.JS代码
$.ajax({
    url: “**.php”,
    type: “POST”,
    data:{
     company_id        :”数据1″,
     statement_year :”数据2″   },
    dataType: “json”,
    error: function(){alert(“PHP文件读取失败”);},
    success: function(result){
         alert(result.company_id);//会显示“数据1”
         }
  });