Ajax:JQuery调用ajax demo

1.编写访问的html文件-ajaxjq

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
  <p>jquery 中使用 ajax</p>
  <a href="javascript:;">点击提交</a>
  <script>
    $(document).ready(function() {
        $('a').click(function () {
          $.ajax({
            url: 'http://127.0.0.1:5000/ajax/js',
            method: 'GET',
            data: {
                username: 'zhangsan',
                password: '123123'
            },
              /**
            success: function (res) {
              console.log(res)
              alert('成功了')
            },
            error: function () {
                alert('出错了')
            },
               **/
              complete: function() {
                alert('请求完成了')
              }
          })
        })
    })
  </script>
</body>
</html>

2.在app.py中编写视图函数

from flask import Flask, render_template, request

app = Flask(__name__)



@app.route('/ajax/js', methods=['GET', 'POST'])
def ajax_js():
    print(request.values)
    return 'js ajax', 200


@app.route('/ajax/jq')
def ajax_jq():
    return  render_template('ajaxjq.html')

3.启动项目,访问http://127.0.0.1:5000/ajax/jq,点击触发ajax调用

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MediaWiki 实现 AJAX 请求的步骤如下: 1. 在 `LocalSettings.php` 文件中添加以下代码开启 AJAX 支持: ```php $wgAjaxExportList = array( 'myFunction' ); $wgUseAjax = true; ``` `$wgAjaxExportList` 数组中包含了可以被调用的函数名,这些函数将由 JavaScript 发送 AJAX 请求来执行。 2. 编写 AJAX 函数: ```php function myFunction( $param ) { // 处理参数 $result = "Hello, " . $param; // 返回结果 return $result; } ``` 此函数接收一个参数 `$param`,处理后返回结果。 3. 编写 JavaScript 代码: ```javascript $.ajax({ type: 'POST', url: mw.util.wikiScript(), data: { action: 'ajax', rs: 'myFunction', rsargs: ['World'] }, dataType: 'json', success: function( response ) { console.log( response ); } }); ``` 该代码使用 jQuery 发送 AJAX 请求,调用了 MediaWiki 中的 `myFunction` 函数,并传入了参数 `'World'`。成功后,控制台将输出结果。 以下是一个简单的 AJAX 请求示例: ```php function myAjaxFunction( $param ) { $result = "Hello, " . $param; return $result; } $wgHooks['BeforePageDisplay'][] = function( $out ) { $out->addScript( <<<JS $(document).ready(function() { $('#ajax-button').click(function() { $.ajax({ type: 'POST', url: mw.util.wikiScript(), data: { action: 'ajax', rs: 'myAjaxFunction', rsargs: ['World'] }, dataType: 'json', success: function( response ) { alert( response ); } }); }); }); JS ); return true; }; $wgResourceModules['ext.myExtension'] = array( 'scripts' => array( 'js/myExtension.js', ), 'dependencies' => array( 'jquery', 'mediawiki.util', ), ); ``` 此代码定义了一个 `myAjaxFunction` 函数,并添加了一个按钮,点击后将触发 AJAX 请求并弹出结果。同时,它还注册了一个资源模块 `ext.myExtension`,在其中包含了 `myExtension.js` 文件。该文件中包含了上述 JavaScript 代码。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值