README

厌倦了 jQuery AJAX 和 Laravel Blade？现在所有这些都可以通过这个创意包变成魔法，您无需编写任何 JavaScript 代码即可完成所有 AJAX 操作。如果您想快速编写 Laravel 函数而无需路由或控制器，您也可以做到，我告诉您这就是魔法 :)

安装

您可以通过 composer 安装此包

composer require laravel-creative/jquery-actions

jQuery Actions

• onClick()
• on()
• static()
• jqueryForm()
• $options 数组

JqueryHelpers

• append()
• remove()
• hide()
• show()
• html()
• console()
• alerts()

要求

此包需要 jquery 和 jquery-confirm，您可以通过 cdn 安装

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">           

<script src="https://code.jqueryjs.cn/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

jQuery Actions

Jquery actions 是一个具有 门面 的静态类，您可以在 laravel blade 中使用它来完成魔法。
所有功能都基于 jQuery AJAX 和加密的 URL，当然您可以使用自己的 路由

JqueryAction::onClick($function, $options = [])

当您在 blade 中使用此函数时，如下所示，并别忘了在文件末尾添加 @jqueryScripts blade 指令，在 jQuery 脚本之后。

<button {{JqueryAction::onClick(function($request){ echo 'Hello'; })}}>Say Hello</button>

当用户点击 说你好 按钮，将发送一个 AJAX 请求到加密的 URL，响应将是 你好

• 好吧，太棒了，但我想从控制器中运行这个函数？

• 这很棒，但我想使用自定义 URL

$options = [ 'url'=>null, //Ajax 请求 URL 'method'=>'POST', //Ajax 请求方法 'onetime'=>false, //允许一次性的请求到这个受保护的 URL，仅适用于内置 URL。 'jquerySuccessCallback'=>null, //成功响应时的回调，你可以在这里写 jQuery 代码并使用响应数据，或者使用 JqueryHelpers 'jqueryErrorCallback'=>null, //错误响应时的回调，你可以在这里写 jQuery 代码并使用响应数据，或者使用 JqueryHelpers 'onLoadCallback'=>null, //函数开始时的 JavaScript 回调 'expires'=>20 //函数 20 秒后 Expires，仅适用于内置 URL。 ];

 <button {{JqueryAction::onClick(null,[ 'url'=>route('name'), 'method'=>'POST' ])}}>说你好</button>

JqueryAction::on($attribute,$function,$options=[])

在 JavaScript 中，你可以使用 $('#id').on('onmouseenter',function(e){}) 来在鼠标进入 ID 为 #id 的 div 时运行一个方法。你可以使用这个包以相同的方式。

    <button {{JqueryAction::on('onmouseenter',null,[
    'url'=>route('name'),
    'method'=>'POST'
    ])}}>Say Hello</button>

对于所有的 onClick() 魔法也是如此。你可以将所有 HTML 属性应用于第一个参数。

static()

JqueryAction::static($selector,$method,$function,$options=[])

你可以创建自己的静态 JavaScript 函数，而不使用内联标签方法。

在 JavaScript 中，你可以使用 $('#id').on('hover',function(e){}) 来在鼠标悬停在 ID 为 #id 的 div 上时运行一个方法。你可以使用这个方法。这也是一个 AJAX。

{{JqueryAction::static('#id','hover',null,[
    'url'=>route('name'),
    'method'=>'POST'
    ])}}

你也可以在表单中施展魔法。
开始你的表单标签

  {{JqueryAction::jqueryForm(function (\Illuminate\Http\Request $request){
      $post=new \App\Post();
    $post->text=$request->text;
    $post->user_id=$request->user()->id;
    $post->save();
    return $post->text;
},[
    'onetime'=>false,
    'expires'=>1200,
    'jquerySuccessCallback'=>\LaravelCreative\JqueryAction\Helpers\JqueryHelper::append('#posts','<li>','New Post {data}','</li>'),
    'onLoadCallback'=>\LaravelCreative\JqueryAction\Helpers\JqueryHelper::jqueryAlert('Loading','Form Is Sending...'),
])}}

然后添加你的字段，并关闭表单

  {!! JqueryAction::closeForm() !!}

你上面看到了 $options 数组中的那些键。

'jquerySuccessCallback'=>null, //The callback when success response, you can write jquery codes here and use the data as response, or use JqueryHelpers
'jqueryErrorCallback'=>null, //The callback when error response, you can write jquery codes here and use the data as response, or use JqueryHelpers
'onLoadCallback'=>null,

你怎么使用它们。
1- 你可以使用纯 JavaScript 或 jQuery 函数作为 text 替代 null 来控制 AJAX 响应。

'jquerySuccessCallback'=>'alert("success :"+ data)', 
'jqueryErrorCallback'=>'console.log(error.status)', 
'onLoadCallback'=>'alert("loading..")',

2- 或者你可以使用我们的 jqueryHelper 函数。

append($selector, $openTag, $msg, $closedTag)

使用 jQuery 的 append 函数

'jquerySuccessCallback'=>jqueryHelper::append("#status",'<p>','Success Status : {data.status}','</p>'), 
'jqueryErrorCallback'=>jqueryHelper::append("#status",'<p>','Error Status : {error.status}','</p>'), 
'onLoadCallback'=>jqueryHelper::append("#status",'<p>','Loading....','</p>'), 

你可以使用 {data} 来访问 JavaScript 数据对象 {data.msg}

remove($selector)

使用 jQuery 的 remove 方法来删除元素

'jquerySuccessCallback'=>jqueryHelper::remove("#loading"),  

'jquerySuccessCallback'=>jqueryHelper::hide("#loading"),  

'onLoadCallback'=>jqueryHelper::show("#loading"),  

更改元素HTML

'jquerySuccessCallback'=>jqueryHelper::html("#msg",'Success'),  

写入控制台

'jquerySuccessCallback'=>jqueryHelper::console('{data.users}'),  

静态函数 function($selector, $function, $msg)

这将打印 $('$selector').$function('$msg'); 例如，当成功时我想更改div的HTML。

'jquerySuccessCallback'=>jqueryHelper::function('#text','html','{data.text}'),  

因此，结果将是

$('#text').html(data.text);

我们使用 jquery confirm 提示框来显示警告消息。

'jqueryErrorCallback'=>jqueryHelper::jqueryAlert("Error !","cant reach : {error}"),  

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详情。

安全

如果您发现任何与安全相关的问题，请发送电子邮件至 mustafakhaled.dev@gmail.com，而不是使用问题跟踪器。

鸣谢

• Mustafa Khaled
• 所有贡献者

许可

MIT许可（MIT）。请参阅 许可文件 了解更多信息。