在javascript调用php函数调用函数调用函数调用函数,从javascript调用php函数

这实际上是

AJAX是什么。您的网页加载,并向元素添加事件。当用户导致事件被触发时,例如通过单击某事,您的Javascript使用

XMLHttpRequest object向服务器发送请求。

在服务器响应(假设输出)后,另一个Javascript函数/事件给你一个地方处理该输出,包括像任何其他HTML一样粘贴到页面。

你可以用普通的Javascript来“手工”,或者你可以使用jQuery。根据您的项目的大小和特定的情况,它可能更简单,只使用纯JavaScript。

普通Javascript

在这个非常基本的示例中,当用户单击链接时,我们向myAjax.php发送请求。服务器将生成一些内容,在这种情况下是“hello world!”。我们将放入具有id输出的HTML元素。

javascript

// handles the click event for link 1, sends the query

function getOutput() {

getRequest(

'myAjax.php', // URL for the PHP file

drawOutput, // handle successful request

drawError // handle error

);

return false;

}

// handles drawing an error message

function drawError() {

var container = document.getElementById('output');

container.innerHTML = 'Bummer: there was an error!';

}

// handles the response, adds the html

function drawOutput(responseText) {

var container = document.getElementById('output');

container.innerHTML = responseText;

}

// helper function for cross-browser request object

function getRequest(url, success, error) {

var req = false;

try{

// most browsers

req = new XMLHttpRequest();

} catch (e){

// IE

try{

req = new ActiveXObject("Msxml2.XMLHTTP");

} catch(e) {

// try an older version

try{

req = new ActiveXObject("Microsoft.XMLHTTP");

} catch(e) {

return false;

}

}

}

if (!req) return false;

if (typeof success != 'function') success = function () {};

if (typeof error!= 'function') error = function () {};

req.onreadystatechange = function(){

if(req.readyState == 4) {

return req.status === 200 ?

success(req.responseText) : error(req.status);

}

}

req.open("GET", url, true);

req.send(null);

return req;

}

HTML

test

waiting for action

PHP

// file myAjax.php

echo 'hello world!';

?>

使用javascript库(jQuery等)

可以说,这是很多Javascript代码。你可以通过拧紧块或使用更简洁的逻辑运算符来缩短它,当然,但仍然有很多。如果你打算在你的项目上做很多这种类型的事情,你可能会更好一个javascript库。

从上面使用相同的HTML和PHP,这是你的整个脚本(jQuery包含在页面上)。我已经收紧了一些代码,以便与jQuery的一般风格更一致,但你得到的想法:

// handles the click event, sends the query

var function getOutput() {

$.ajax({

url:'myAjax.php',

complete: function (response) {

$('#output').html(response.responseText);

},

error: function () {

$('#output').html('Bummer: there was an error!');

}

});

return false;

}

不要急于jQuery:添加任何库仍然添加成百上千行代码到你的项目,就像你写的一样。在jQuery库文件中,你会发现类似的代码,在第一个例子,加上更多。这可能是一件好事,可能不是。计划,并考虑您的项目的当前大小和未来的扩展和目标环境或平台的可能性。

如果这是所有你需要做的,写一个简单的javascript一次,你做完了。

文档

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值