jQuery实现Ajax功能分析【与Flask后台交互】(2)

您的 index.html 要么继承一个已经加载了 jQuery 且设定了 $SCRIPT_ROOT 环境变量的 layout.html 模板,要么自己在上方完成了这些事。以下是我们的小应用 (index.html) 所需的 HTML 代码。请注意这里我们也将脚本直接写入了 HTML。通常来讲,将脚本代码放置到一个独立的脚本文件里是一个更好的点子。

<script type=text/javascript> $(function() { $('a#calculate').bind('click', function() { $.getJSON($SCRIPT_ROOT + '/_add_numbers', { a: $('input[name="a"]').val(), b: $('input[name="b"]').val() }, function(data) { $("#result").text(data.result); }); return false; }); }); </script> <h1>jQuery Example</h1> <p><input type=text size=5 name=a> + <input type=text size=5 name=b> = <span id=result>?</span> <p><a href=# id=calculate>calculate server side</a>

我们不会过多介绍 jQuery 使用的细节,仅仅对以上代买做一个快速的解释:

$(function() { ... }) 将会在浏览器加载完页面的基础内容之后立即执行。

$('selector') 选择一个用于操作的元素。

element.bind('event', func) 指定元素被单击时运行的函数,如果这个函数返回 false ,那么单击操作的默认行为将被取消。在本例中,点击操作的默认行为是导航到 # 链接标签。

$.getJSON(url, data, func) 发送一个 GET 请求给 url ,其中 data 对象的内容将以查询参数的形式发送。一旦数据抵达,它将以返回值作为参数执行给定的函数。请注意,我们在这里可以使用我们先前设定的 $SCRIPT_ROOT 变量。

如果您还没有完全了解这个例子,可以从 github 上下载 本例源码

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/b9d5c1bf68de5a59e5bf45a9f16ce724.html