在本文中，我们将详细介绍使用Rexsee、Jquery、PHP开发移动应用中的数据交互问题的各个方面，并为您提供关于php中require的用法的相关解答，同时，我们也将为您带来关于#翻译#使用Del
在本文中，我们将详细介绍使用Rexsee、Jquery、PHP开发移动应用中的数据交互问题的各个方面，并为您提供关于php中require的用法的相关解答，同时，我们也将为您带来关于#翻译# 使用 Delphi 开发移动应用、ajax、jquery、jquery模板实现异步表单，局部刷新、Ajax、Jquery、Json简介、ajax更新数据后，jquery、jq失效问题_jquery的有用知识。
本文目录一览：- 使用Rexsee、Jquery、PHP开发移动应用中的数据交互问题（php中require的用法）
- #翻译# 使用 Delphi 开发移动应用
- ajax、jquery、jquery模板实现异步表单，局部刷新
- Ajax、Jquery、Json简介
- ajax更新数据后，jquery、jq失效问题_jquery
使用Rexsee、Jquery、PHP开发移动应用中的数据交互问题（php中require的用法）
Rexsee社区的一篇经验贴，转过来，主要是介绍数据交互这一块的实现，共同学习：
在开发某移动销售产品时，用户要求通过WebService调用进行数据交互。使用Rexsee,Jquery-mobile,PHP,WebService几种开发工具可以做到设备调用完成照片、定位等功能，使用Juqery-mobile开发界面，使用PHP+SOAP完成数据库及Webservice的数据交互功能，通过JSON使用PHP将返回数据封装后再返回到前端，这样就做到了数据的异步交互，而且返回结果标准统一，可用性强。下面通过几个例子介绍一下：
登录页面:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>移动销售</title>
<link rel="stylesheet" href="../m_jquery-110/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="../m_jquery-110/demos/docs/_assets/css/jqm-docs.css"/>
<script src="../m_jquery-110/demos/js/jquery.js"></script>
<script src="../m_jquery-110/demos/docs/_assets/js/jqm-docs.js"></script>
<script src="../m_jquery-110/jquery.mobile-1.1.0.js"></script>
<script src="../m_jquery/demos/jquery.json-2.3.js"></script>
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted; color:#FFCCFF
}
</STYLE>
<script type="text/javascript">
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]);
return false;
}
function SetCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
return false;
}
function onError(data, status)
{
alert("获取数据失败");
rexseeApplication.quit();
return false;
}
function onSuccess(data, status)
{
if (status="sucess")
//alert("刷新数据成功!");
mk_data(data,status);
return false;
}
function mk_data(data,status)
{
data = $.trim(data);
//alert(data);
var m_sel = $.evalJSON(data).Shop.oper;
//alert(m_sel);
if (m_sel=="getshop")
{
if (data=="{}")
{
alert("登录失败，系统将退出！");
rexseeApplication.quit();
}
else
{
var data1 = $.evalJSON(data).Shop.shopno;
var data2 = $.evalJSON(data).Shop.shopname;
//alert(data1);
var data3 = $("#uname").val();
var data4 = $("#upwd").val();
var m_txt="欢迎您"+ data3 + "\n 部门:" + data1 + data2;
alert(m_txt);
if (data1!="")
{
SetCookie("uname", data3);
SetCookie("ushopno", data1);
SetCookie("ushopname", data2);
SetCookie("upwd", data4);
//window.open (''main.php'');
window.location="main.php";
}
}
}
return false;
}
function init()
{
var m_v1=$("#uname").val();
var m_v2=$("#upwd").val();
if (m_v1=="")
{
alert("请输入号码!");
return false;
}
if (m_v2=="")
{
alert("请输入密码!");
return false;
}
$("#oper").val(''getshop'');
var formData = $("#loginForm").serialize();
$.ajax({
type: "POST",
url: "func_soap.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
}
$(document).ready(function() {
rexseeScreen.setScreenOrientation(''portrait'');
rexseeStatusBar.setStyle(''visibility:hidden;'');
var m_s1=rexseeTelephony.getDeviceId();
var m_s2=getCookie(''uname'');
var m_s3=getCookie(''upwd'');
$("#uname").val(m_s2);
$("#upwd").val(m_s3);
$("#mylogin").click(function(){
//alert("fdjsaf");
init();
})
return false;
});
</script>
</head>
<body>
<form name="loginForm" id="loginForm" method="POST" target="_self" action="javascript:void(0);" >
<input type="hidden" name="oper" id="oper" size="36" value="" readonly>
<div data-role="page"id="album-list">
<div data-role="header"data-theme="b">
<h1><img src="images/logo4.png" /></h1>
</div> <!-- /header -->
<div data-role="content">
<div>
<p></p>
<div>
<divui-grid-a'' id=saleinfo>
<divui-block-a''width:180px''><label for=''dd_sid''>手机号码</label></div><divui-block-b''></div>
<divui-block-a''width:180px''><input type=''text'' name=''uname'' id=''uname'' value=''18658269081'' /></div><divui-block-b''></div>
<divui-block-a''width:180px''><label for=''dd_sid''>登录密码</label></div><divui-block-b''></div>
<divui-block-a''width:180px''><input type=''password'' name=''upwd'' id=''upwd'' value='''' /></div><divui-block-b''></div>
<p></p>
<p></p>
</div>
</div>
<a id="mylogin" href="javascript:void(0);" data-role="button" data-theme="e" data-icon="check">登录系统</a>
<p><img border="0" src="images/back.png" ></p>
<p></p>
</div>
</div><!-- /content -->
<div data-role="footer"data-theme="b" data-position="fixed">
<p>CopyRight© Chinaunicom Jinan 2012 All Right Reserved. </p>
</div>
</div><!-- /page -->
</form>
</body>
</html>
以上页面通过Jquery-mobile显示一个登录页面，点击提交后异步调用func_sap函数完成WebSerivce调用及返回，返回数据以JSON形式，通过javascript的json函数将数据提取并处理。
func_soap.php文件
<?php
function getshop($phone)
{
$wsdl = "http://.../Service.asmx?wsdl";
$soap_client = new SoapClient($wsdl);
$param=array( ''phone''=> $phone);
$objectresult = $soap_client->AgetShop($param);
$simpleresult = $objectresult->AgetShopResult;
$obj = simplexml_load_string($simpleresult);
$obj->Shop[0]->addChild("oper", "getshop");
$json = json_encode($obj);
$array = json_decode($json,TRUE);
$_SESSION[''shopno'']= $array["Shop"][''shopno''];
$_SESSION[''phone'']=$phone;
return $json;
}
//调用函数
header("Content-Type:text/html;charset=utf-8");
$moper=$_POST[''oper''];
if ($moper=="getshop")
{
$mresult=getshop($muname);
echo $mresult;
}
?>
#翻译# 使用 Delphi 开发移动应用
现在移动设备的发展现在变成了趋势. 我们可以考虑本地语言开发 (例如ObjectiveC for IOS或 Java for Android), 但通常对新开发者的学习代价高. 另一个选择是第三方代理 (例如Titanium, PhoneGap) 并在偏好的语言中开发，目标位新移动平台.
在此文章中，我想使用Object Pascal和Delphi为开发者演示类似的过程。你可能记得. Borland Delphi 在本世纪初相当流行，并且还有一个很大社区.
ajax、jquery、jquery模板实现异步表单，局部刷新
一.利用ajax表单实现异步表单局部刷新 Ajax.BeginForm()方法
布局文件中添加必要的库文件
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
Model中添加一个Singer类
public class Singer
{
public int SingerId { get; set; }
public string SingerName { get; set; }
}
播种数据库时添加几条数据
public class InitData : DropCreateDatabaseIfModelChanges<AutoDbEntities>
{
protected override void Seed(AutoDbEntities context)
{
context.Singers.Add(new Singer { SingerName = "周杰伦"});
context.Singers.Add(new Singer { SingerName = "周笔畅"});
context.Singers.Add(new Singer { SingerName = "周华健"});
context.Singers.Add(new Singer { SingerName = "12"});
context.Singers.Add(new Singer { SingerName = "123"});
context.Singers.Add(new Singer { SingerName = "1234"});
base.Seed(context);
}
}
添加一个控制器HomeController
HomeController中Index()方法
public ActionResult Index()
{
return View();
}
Index视图
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>
@*利用ajax表单实现异步表单局部刷新*@
@using (Ajax.BeginForm("Search","Home",new AjaxOptions
{
UpdateTargetId = "result" //要替换的元素id
}))
{
<input type="text" name="search"/>
<input type="submit" value="搜索"/>
}
</div>
<div id="result">
显示搜索结果
</div>
HomeController中添加Search()方法
public ActionResult Search(string search)
{
var singers = db.Singers.Where(a => a.SingerName.Contains(search));
return View(singers);
}
为Search()方法添加一个分部视图
<div>
@foreach (var item in Model)
{
<a href="#">@item.SingerName</a><br/>
}
</div>
运行程序
二.用Jquery实现 异步表单 局部刷新
1.通过返回html局部视图的方式实现刷新
修改Index视图
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript">
$(function () {
$("#form1").submit(function (event) {
event.preventDefault(); //阻止表单提交
//传递HTML方式
var form = $(this);
$("#result").load(form.attr("action"),form.serialize()); //替换页内元素
});
})
</script>
<div>
<form id="form1" method="get" action="@Url.Action("Search","Home")">
<input type="text" name="search"/>
<input type="submit" value="搜索"/>
</form>
</div>
<div id="result">
</div>
运行程序
2.通过返回JSON数据实现异步表单，局部刷新,利用Jquery模板实现局部刷新，通过$.getJSON()方法得到传递的JSON数据
需要一个Jquery Template插件的支持，可以在Nuget中查找下载。安装插件后布局文件中添加需要的库文件
<script src="../../Scripts/jQuery.tmpl.js" type="text/javascript"></script>
修改HomeController中的Search()方法，使其返回JSON数据
public ActionResult Search(string search)
{
var singers = db.Singers.Where(a => a.SingerName.Contains(search));
return Json(singers,JsonRequestBehavior.AllowGet);
}
修改Index视图
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@*Jquery模板*@
<script id="myTemplate" type="text/x-jquery-tmpl">
<a href="#">${SingerName}</a><br/> //JSON数据中包含的属性
</script>
<script type="text/javascript">
$(function () {
$("#form1").submit(function (event) {
event.preventDefault(); //阻止表单提交
//传递JSON方式
var form = $(this);
$.getJSON(form.attr("action"),form.serialize(),function (data) { //getJSON()方法，利用表单得到JSON数据
$("#myTemplate").tmpl(data).appendTo("#result"); //tmpl方法，把模板添加到指定位置
});
});
})
</script>
<div>
<form id="form1" method="get" action="@Url.Action("Search","Home")">
<input type="text" name="search"/>
<input type="submit" value="搜索"/>
</form>
</div>
<div id="result">
</div>
运行程序
Ajax、Jquery、Json简介
Ajax、Jquery、Json简介
1.Ajax概述
①Asynchronous JavaScript And XML(异步的JavaScript和XML)是几种技术的强强联合，Ajax实际上就是一种使用JavaScript控制前台所有操作，同时在后台把得到的数据用XML代码来传递给前台的一种Web程序开发模式。
②好处：(1)请求响应能够通过其他JavaScript动作来实现
(2)可以不用刷新整个页面，只刷新需要改变数据的一部分
(3)能够开发出更具有吸引力的页面效果
③一段XML代码
public String getXML(Student stu){
StringBuffer sb = new StringBuffer();
sb.append("<xml version=1.0 >");
sb.append("<student>");
sb.append("<name>"+stu.getName()+"</name>");
sb.append("<age>"+stu.getAge()+"</age>");
sb.append("</student>");
return sb.toString();
}
2.使用Ajax进行请求和普通form提交请求的区别
①form提交
对象是HttpServletRequest，请求和响应的过程是同步的
<form action="sssServlet" method="post"> </form>
<a href="xxServlet?name=value" >链接</a>
②Ajax请求
对象是XMLHttpRequest，请求和响应的过程是异步的
<!-- JS代码-->
xmlreq.open("method","url",true);
xmlreq.send("name=value");
③同步和异步通讯
⑴同步：指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系。
如下图所示：
-------------------A
--------------------B
---------------------------------------总时间
⑵异步：在发送字符时,所发送的字符之间的时间间隔可以是任意的。当然,接收端必须时刻做好接收的准备，在时间上错开，两边都可以工作，关键是不用刻意刷新页面，等待响应。
如下图所示：
---------------------------------A(浏览器)
-------------------------------B(服务器)
3.Ajax核心处理对象
①核心处理对象是一个浏览器内置的组件，在js中可以用对象名为XMLHttpRequest来表示。最早出现在IE4里面，后来其他浏览器中也都内置了该对象。不同浏览器创建该对象的方法不一样。
②IE浏览器中所有组件都叫做ActiveXObject,不同控件创建方式不一样
IE5之前var xmlreq = ActionXObject("Microsoft.XMLHTTP");
IE5之后var xmlreq = ActionXObject("Msxml2.XMLHTTP");
非IE浏览器var xmlreq = new XMLHttpRequest();
③常用方法：
(1) xmlreq.abort()：取消当前的HTTP请求
(2) xmlreq.open("method",true)：初始化一个HTTP请求，指定请求方法(Get/Post)、URL、身份验证信息等
(3) xmlreq.setRequestHeader()：设置HTTP请求的头信息
(4) xmlreq.getResponseHeader()：获得响应内容的HTTP头信息
(5) xmlreq.send(date)：发送一个HTTP请求到服务器
④常用属性：
(1)xmlreq.onreadystatechange;指定当发生就绪状态变更事件时的处理者，通常是JavaScript函数
xmlreq.onreadystatechange=function××(){//回调函数}
(2)xmlreq.readyStateXMLHttpRequest对象专有的异步响应的状态
0表示未初始化，即XMLHttpRequest对象未创建open()方法未调用
1表示XMLHttpRequest对象被创建，但请求未发出send()未调用
2表示HTTP请求已经发出正在处理中，这时可以取得HTTP头信息，但是HTTP响应内容不可用
3表示HTTP响应内容部分数据可用，但响应还没有完成
4表示服务器响应完成，可以从属性responseBody、responseText、responseXML中获得完整响应内容
(3)xmlreq.status200(按照HTTP协议规定的状态值)
xmlreq.readyState=4与xmlreq.status=200的区别：
例如：从服务器A发送一仓库瓷器，到浏览器B，中间可能会有很多车来进行运输，而且各个车走的路线也不同。如何保证收到的货数量正确而且没有货物破损？
xmlreq.readyState=4验证返回数据的数量是否OK
xmlreq.status=200验证返回数据完整性是否OK
(4)响应主体responseBody：以无符号字节数组描述响应内容正文
(5)响应流responseStream：以IStream(二进制数据流)形式描述响应内容正文
(6)响应文本responseText：响应内容正文的纯文本形式
(7)响应XML responseXML：以XML Dom描述响应内容正文，（常用）
4.Ajax开发的步骤
①创建XMLHttpRequest对象
②使用xmlreq.open()方法指定要连接的服务器代码和请求提交方法
③指定服务器响应完成后，如何处理服务器响应内容--回调函数
④使用xmlreq.send()提交请求
补充：服务器端操作
①得到页面请求参数
②判断或数据库查询
③通过response对象返回响应结果(与之前有区别)
5.(补充)jQuery基本语法
①使用jQuery
⑴如何引入jQuery <script type="text/javascript" src="jquery.js"></script>
⑵如何调用jQuery要想安全、无错的调用jQuery代码，必须把它们放在一个函数中
<script language=JavaScript>
$(document).ready(function(){
//在这里写jQuery代码能够被正常调用
$("div").addClass("a");
});
</script>
-------------------------------------------------------------------------------
document:DOM文档对象,只能调用DOM API中的方法
$(document):jQuery对象,能调用jQuery API中的方法，简单很多
.ready():html文档加载完毕，触发的事件，开始干活
function(){}:html加载完毕后，如何处理
$("div"):jQuery选择器，转化<div>标签为jQuery对象
.addClass("a"):给该标签添加一个class属性,<div>
②核心能力----选择器
jQuery的根本在于它在页面上选择和操作某些元素的能力。
jQuery创建了自己的选择语法，非常简单。它通过HTML元素名、ID、Class查找对象，返回的对象都是jQuery对象
jQuery对象不能直接调用DOM定义的方法，只能使用jQuery API中指定的方法
举例：
$(“div”).show();//按照html选择
$("p").css("background","#ff0000");//
$("#sampleText").html("Hi");//按照ID选择
$(“.redBack”).css(“background”,“#ff0000”);//按照CSS选择
jQuery可以合并搜索结果，可以在一个搜索中，将多个搜索条件合并起来。通过使用“,”分隔每个搜索条件，搜索将返回与搜索词匹配的一组结果
$(“p,span,div”).hide();//按照合并条件选择
③遍历
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
var aa = $("li");//得到数组
//需要对其中某些元素进行单独的设置，需要循环该数组---循环就是遍历
$("li").each(function(i){
//该每次循环取出的标签添加文字
$(this).html("列表"+i);
});
each()函数，和“for loop”的功能一样，遍历每个函数并通过迭代递增元素，循环中每个元素的引用都可以通过“this”或$(this)来实现：
实现表格隔行换色效果
$("tr").each(function(i){
$(this).css({background: ["#ccc","#fff"][i%2]});
});
其他函数：
slice(start,end)//按照指定的开始结束索引截取
next()//查找后面他紧邻的同辈元素
filter(expr)//根据条件过滤
④赋值、取值
⑴jQuery可以使用同一个函数实现给页面中某个元素赋值和取值；带参数就是赋值方法；不带参数就是取值方法。
代码如下：
$(“#msg”).html();//返回id=msg的元素节点的html内容
$(“#msg”).html(“<b>new Content</b>”); //将新内容写入id=msg的元素中
$(“#msg”).text(); //返回id=msg的元素节点的文本内容
$(“#msg”).text(“new Content”); //将文本写入id=msg的元素节点中
$(“#msg”).height();//返回id=msg的元素的高度
$(“#msg”).height(“300”); //将id=msg的元素高度设为300
$(“input”).val();//返回表单的value值
$(“input”).val(“test”);//将表单的value值设置为test
$(“#msg”).click() ;//触发id=msg的元素的单击事件
$(“#msg”).click([fn]) ;//为id=msg的元素的单击事件添加函数
jQuery方法的返回值全部是jQuery对象，所以可以支持方法的连写，简化代码。
⑵jQuery函数可以方便的得到或者修改任意元素的样式，从而改变页面效果
主要包括以下样式：
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red",background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在）就删除(添加)名称为select的class
⑶jQuery还提供了几个实用的方法，实现状态切换功能。如：
toggle()方法包括了hide()和show()方法
slidetoggle()方法包括了slideDown()和slideUp方法
⑷jQuery已经把所有的DOM事件处理都进行了封装，我们可以直接通过jQuery对象获得对象并添加事件处理。
代码如下：
$("#msg").click(function(){alert("good")})//为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理
⑤jQuery进行Ajax处理的方法
Ajax如果使用JavaScript完成必须要
(1)进行浏览器判断
(2)创建XMLHttpRequest对象
(3)打开与服务器的连接
(4)设置回调函数
(5)发送请求
在jQuery中，把上述5个步骤，合为一体。
$.ajax({
type: "POST",
url: "some.do",
data: "name=John&location=Boston",
success: function(msg){
//回调函数,msg服务器返回的数据
alert( "Data Saved: " + msg );
}
});
6.(补充)JSON
①在Web程序中，需要从服务器返回数据，要求返回的不只有字符串、还可以返回XML等。
返回的不同格式中包含的数据量不同：
Content-Type="text/html""text/xml"
(1)String str = "标题|正文|作者";
解析字符串，适合在传递少量数据时使用
String[] sarr = str.split("|");
String title = sarr[0];
String count = sarr[1];
String author = sarr[2];
(2)服务器返回的数据
"<xml version="1.0" >
<car total="$50.">
<item name="">
<amount></amount>
</itme>
<item name="">
<amount></amount>
</itme>
<item name="">
<amount></amount>
</itme>
</car>"
在浏览器中取出数据
DOMdocument.getElementByTagName("car");
jQuery$("items").each(function(i){
$(this name).val();
});
优缺点对比：
(1)服务器返回String字符串，在浏览器中解析简单，但是数据量比较小。
(2)服务器返回xml字符串，能够包含大量数据，但是服务器端的转化代码不能通用，前台解析有固定的方法，比字符串解析要更可靠。
②程序开发中还可以选择另外一种通用数据格式：JSON
(1)既有字符串的简易性
(2)又有XML的格式化
以下即是JSON的两种结构：
[{"id":"260","name":"长沙"},{"id":"261","name":"张家界"},
{"id":"262","name":"株洲"},{"id":"263","name":"韶山"},
{"id":"264","name":"衡阳"},{"id":"265","name":"郴州"},
{"id":"267","name":"娄底"},{"id":"268","name":"耒阳"},
{"id":"269","name":"永州"},{"id":"270","name":"湘乡"},
{"id":"271","name":"湘潭"},{"id":"272","name":"常德"},
{"id":"273","name":"益阳"},{"id":"274","name":"怀化"},
{"id":"275","name":"邵阳"},{"id":"276","name":"岳阳"},
{"id":"277","name":"吉首"},{"id":"278","name":"大庸"},
{"id":"279","name":"韶山"}]
[{"id":"1","name":"中国"}]
(1)用[]表示其中包含多个数据，是一个数组
(2)用{}表示其中的某一条数据
(3)用,表示数据与数据之间的分割
(4) 用:表示某一条数据，名称和值的关系
ajax更新数据后，jquery、jq失效问题_jquery
给元素绑定click事件 ，但是遇到一个问题 就是 当我执行一些ajax请求后 这个click事件就失效了
比如说 我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了
其实 原因很简单
ajax加载内容是在$(document).ready()之后的操作，这个时候给绑定函数的时候，找到的元素集合中还不包括ajax加载的内容，所以原来的没有问题，后加载的就没有绑定
解决方法 有两个 ：
1. 在ajax请求成功之后重新绑定
2. 用live方法
两种方法适用在不同的场合
如果是处理事件的话 可以用live
如果是其他一些处理方法的 live就不支持 只能重新绑定
关于使用Rexsee、Jquery、PHP开发移动应用中的数据交互问题和php中require的用法的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于#翻译# 使用 Delphi 开发移动应用、ajax、jquery、jquery模板实现异步表单，局部刷新、Ajax、Jquery、Json简介、ajax更新数据后，jquery、jq失效问题_jquery等相关内容，可以在本站寻找。
本文标签：
