4

有人使用 eldarion ajax 插件吗?以前称为bootstrap ajax...

我让它在将调用发送到另一个页面并且成功的地方工作,我只是无法从该页面取回数据。

 // this is ajax.php
 <form method="post"  action="ajax-here.php" class="ajax" data-append="#result">
 <input type="text" name="text" />
 <input type="submit" />  
 </form>
 <div id="result">  </div>

 // this is ajax-here.php
 $text = $_POST['text'];
 echo $text;

我想要的只是将 ajax-here.php 的结果显示在 div 中,并在发生 ajax 的页面上显示 ID 结果。任何建议都会很棒。我喜欢使用这个插件,因为它工作得很好,只是不知道如何将数据附加到我想要的 div 中。谢谢

4

3 回答 3

3

免责声明:我没有使用过这个框架,这也是我第一次听说它。

尽管如此,查看文档,它指定了您的服务器响应应为 JSON 格式的次数。

html如果您在响应中包含一个属性,那么您想做的事情应该是可能的。

// ajax-here.php
$response['html'] = $_POST['text'];
return json_encode($response);

这是生成的响应:

{
    "html": "The text sent to the server"
}
于 2013-11-08T08:30:39.317 回答
3

我不熟悉 Eldarion AJAX 插件。我刚刚阅读了自述文件,老实说我不喜欢它。(虽然它确实因为有一个很酷的名字而赢得积分。)

有太多的“魔法”在继续。您无需指定发送和接收数据的格式。如果你想改变一些东西,你必须用 HTMLdata-属性来做。对我来说,这违反了关注点分离的原则,即网站结构的每个部分都应该有一个目的。例如,HTML 应该定义页面的结构,CSS 定义样式,Javascript 定义交互性。让 HTML 属性定义 AJAX 活动对我来说似乎很荒谬。

但是不要紧。让我们看看您遇到的具体问题,即如何将数据返回给 Eldarion。让我们再看一遍 README 文件:

通过将顶级属性添加到您已经返回的名为“html”的 JSON 中,可以轻松扩展对服务器端代码的支持,该属性是呈现的内容。与构建 Web 应用程序的主干.js 方法不同,eldarion-ajax 利用服务器端模板渲染引擎来渲染和返回 HTML 片段。

html所以 Eldarion 期望接收一个 JSON 结构,其中包含一个包含渲染内容的顶级属性。所以它期望一个大约像这样的结构:

{
    "html": "<p>The content that should be appended to #result.</p>"
}

所以让我们用你的内容来做。让我们不要试图自己制作 JSON。做正确太难,犯错太容易。幸运的是,PHP 通过该函数为我们提供了帮助,该json_encode函数将数组编码为有效的 JSON 结构。

$text = $_POST['text'];
$data = array(
    'html' => $text
);
echo json_encode($data); // output the data as JSON

我已经设置了一个 jsFiddle 示例来展示它是如何工作的。显然它有点不同,因为我必须使用 jsFiddle API,但您可以大致了解它是如何工作的。

于 2013-11-08T08:30:26.650 回答
1

为什么不依赖只提交对 AJAX 函数的调用的按钮?

在该函数中,您告诉 AJAX 从您的 PHP 文件中获取数据,并使用以下命令将其返回到上一个文档中;

document.getElementById("result").innerHTML=xmlhttp.responseText;

似乎比你使用的更有意义......但是,嘿,可能只是我。

编辑:


例子:

somePHPFile.php

   <input type="text" name="text" id="text" />
   <button type="button" onclick='ajaxCALL();'>SomeTEXT</button>
<div id="result">  </div>

或者您可以执行以下操作:

<input type="text" onblur='ajaxCALL();' name="text" id="text" />
    <div id="result">  </div>

On Blur 在文本框失去焦点时触发。如果您想通过 AJAX 立即响应,请使用“onkeyup”,即:在您键入时。

somePHPFile.php 中结束正文标记之前的脚本

<script>
function ajaxCALL()
{
var val=document.getElementById("text").innerHTML;
if (val.length==0){
  document.getElementById("result").innerHTML="";
  return;
  }

if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }

else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

xmlhttp.onreadystatechange=function()
  {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
  document.getElementById("result").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("POST","ajax-here.php",true);

   xmlhttp.send("text="+val);
}
</script>
于 2013-11-08T15:09:41.140 回答