laravel5.2将laravel代码转换为ajax

时间：2016-07-13 16:01:39

标签： php jquery ajax laravel-5.2

我用laravel代码enter image description here

开发了这个形状

当我点击+此产品的数量增加1时。

单击时 - 此产品的数量减少1。

cart.blade.php（查看）： 

<div class="cart_quantity_button">
    <a class="cart_quantity_up" href='{{url("cart?product_id=$item->id&increment=1")}}'> + </a>
    <input class="cart_quantity_input" type="text" name="quantity" value="{{$item->qty}}" autocomplete="off" size="2">
    <a class="cart_quantity_down" href='{{url("cart?product_id=$item->id&decrease=1")}}'> - </a>
</div>

控制器中的购物车功能： 

public function cart()
{
    if (Request::isMethod('POST')) {
        $product_id = Request::get('product_id');

        $product = Product::find($product_id);

        Cart::add(array('id' => $product_id,'name' => $product->name, 'qty' => 1, 'price' => $product->price,'options'=>array('image'=>$product->image)));
    }

    $id = Request::get('product_id');

    //increment the quantity
    if ($id && (Request::get('increment')) == 1) {
        $p = Request::get('increment');

        $rowId = Cart::search(array('id' => $id));
        // echo "row id".$rowId."and the p=".$p;
        $item = Cart::get($rowId[0]);
        // echo "row id".$rowId;

        $add = $item->qty + 1;
        Cart::update($rowId[0], $add);
    }

    //decrease the quantity
    if ($id && (Request::get('decrease')) == 1) {
        $rowId = Cart::search(array('id' => $id));

        $item = Cart::get($rowId[0]);
        $sub = $item->qty - 1;
        echo "item" . $sub;
        Cart::update($rowId[0], $sub);
    }

    if ($id && (Request::get('remove')) == 1) {
        $rowId = Cart::search(array('id' => $id));

        Cart::remove($rowId[0]);
    }

    $cart = Cart::content();

    return view('cart', array('cart' => $cart,'title' => 'Welcome', 'description' => '', 'page' => 'home','subscribe'=>"",'brands' => $this->brands));

}

public function cart_remove()
{
    Cart::destroy();
    return Redirect::away('cart');
}


public function checkout()
{
    $cart = Cart::content();
    return view('checkout', array('cart' => $cart,'title' => 'Welcome', 'description' => '', 'page' => 'home','subscribe'=>"",'brands' => $this->brands));
}

我想用ajax代码转换它，我为此做了简单的代码

<script>
    function getMessage($id)
    {
        $.ajax({
            type:       'POST',
            url:        'getmsg',
            dataType:   'json', 
            data:       {
                            valu_id: $id
                        },
            success:    function(data) {
                            $("#msg").html(data.msg);
                        }
        });
    }
</script>

<?php 
$item_id = 3;
echo Form::button('+',['onClick'=>'getMessage($item_id)']);
?>

<div id='msg'>  
    <input id="msg" type="text" name="quantity" autocomplete="off" size="2">
</div>

控制器功能： 

public function ajax()
{
    $value= $_POST['valu_id']+1;
    return response()->json(array('msg'=>$value), 200);
}

我不知道如何填写此代码。我对此代码有很多疑问。 像

  • 如何从 cart.blade.php 视图中获取产品ID并将其放入getmessage()以在ajax函数中使用它？
  • 如何将getmessage()置于<div class="cart_quantity_button">而不是按钮onclick以尊重上述形状？
  • 如何将输入字段中的数量作为上面的形状返回？

1 个答案:

答案 0 :(得分：1)

注意：这个答案并不是简单地为您提供一个有效的解决方案，而是了解如何处理ajax请求/响应。

首先，即使很难event.preventDefault()会阻止跟踪网址的默认操作，我也不会将网址存储到data-属性。

<div class="cart_quantity_button">
    <a class="cart_quantity_up" href="javascript:void(0)" data-route="{{url('cart?product_id=$item->id&increment=1')}}"> + </a>
    <input class="cart_quantity_input" type="text" name="quantity" value="{{$item->qty}}" autocomplete="off" size="2">
    <a class="cart_quantity_down" href="javascript:void(0)" data-route="{{url('cart?product_id=$item->id&decrease=1')}}"> - </a>
</div>
  

如何从cart.blade.php视图中获取产品ID并将其放入getmessage（）以在ajax函数中使用它？

听一个事件总是更好，在这种情况下点击。

$('.cart_quantity_up').on('click', function(e) {
    //an ajax call here
});

相同的代码适用于另一个

$('.cart_quantity_down').on('click', function(e) {
    //an ajax call here
});

现在，每个对应的元素都附加了两个点击事件。然后，是时候把ajax函数包起来了。

function updateQty(url){
    var $qty = $('.cart_quantity_input');
    $.ajax({
        type: 'POST',
        url: url,
        dataType: 'json', 
        data: {
            cart_qty: $qty.val()
        },
        success:function(data){
            $qty.val(data.qty);
        }
    });
}

上述功能只是

  1. 获取一个参数，该参数是ajax要调用的URL，
  2. 使用uri param键＆＃39; cart_qty＆＃39;
    3. 发布帖子请求
  3. 返回响应，该值是＆＃39; qty＆＃39;从控制器到cart_quantity_input输入元素

    4. 然后，将ajax函数放到第一个片段（click事件）

    $('.cart_quantity_up').on('click', function(e) {
    e.preventDefault();
    //get the data-route
    var url = $(this).data('route');
    //call the ajax function
    updateQty(url);
});

$('.cart_quantity_down').on('click', function(e) {
    e.preventDefault();
    //get the data-route
    var url = $(this).data('route');
    //call the ajax function
    updateQty(url);
});

    实际上为了简单起见，您可以一次性附加来自多个选择器的事件。

    $('.cart_quantity_up, .cart_quantity_down').on('click', function(e) {
    e.preventDefault();
    //get the data-route for the 'up'
    var url = $(this).data('route');
    //call the ajax function
    updateQty(url);
});

    现在，您可以了解如何创建ajax帖子并检索其响应，然后将其附加到input元素。

    此时，我将重构您的代码。哦，你们所有的问题都应该在现阶段得到解答。

    当您处理发布和获取此类简单情况的请求时，您的控制器看起来有点乱。我宁愿做发帖。我没有使用大量条件，而是将脚印放在data-属性中（再次）。最后，我将它们包装在一个表单中，因为CSRF令牌为您提供了更多的安全性。

    <form name="cart_form">
    {{ csrf_field() }}
    <input type="hidden" class="item_id" value="{{ $item->id }}">
    <div class="cart_quantity_button">
        <button type="button" class="cart_quantity_up" data-route="{{url('cart')}}" data-increase="1"> + </button>
        <input class="cart_quantity_input" type="text" name="quantity" value="{{$item->qty}}" autocomplete="off" size="2">
        <button class="cart_quantity_down" data-route="{{url('cart')}}" data-increase="0"> - </button>
    </div>
</form>

    只要您要发布帖子请求（我正在做的话），您就可以自由设计自己的视图。我将稍微解释一下我将要做的逻辑。

    • 在隐藏字段
      • 上按住$item->id
    • 要向url('cart')路线发出ajax请求并将其存储到data-route
    • 添加data-increase以区分每个请求应增加或减少

    现在听取点击事件

    $('.cart_quantity_up, .cart_quantity_down').on('click', function(e) {
    e.preventDefault();
    var $this = $(this),
        url = $this.data('route'),
        increase = $this.data('increase');

    updateQty(url, increase);
});

    低于updateQty功能与我制作的第一个有点不同。它接受第二个参数increase作为（伪）布尔值。另请注意，我将令牌发布为请求标头而不是正文。

    function updateQty(url, increase){
    var $qty = $('.cart_quantity_input'),
        itemId = $('.item_id').val();
    $.ajax({
        type: 'POST',
        url: url,
        dataType: 'json',
        headers: {
            'X-CSRF-Token' : $('input[name="_token"]').val()
        },
        data: {
            'cart_qty': $qty.val(),
            'item_id': itemId,
            'increase': increase
        },
        success:function(data){
            $qty.val(data.qty);
        }
    });
}

    您的控制器 

    
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Cart;
use App\Http\Requests;

class YourController extends Controller
{
    public function cart(Request $request)
    {
        if ($request->ajax()) {
             $id = $request->item_id;
             $cart = Cart::search(['id' => $id]);
             //Note: This code may not working as what you expect
             //      but it should give you the idea that laravel
             //      actually has increment and decrement methods
             //      and else.
             if ($request->increase) {
                 $cart->increment('qty');
             } else {
                 $cart->decrement('qty');
             }
             $qty = $cart->first(['qty']);

             return response()->json(['qty' => $qty]);
        }
        //rest is your code
        //...
    }
}

    在上面的代码中，我试图

    • 将ajax请求与您的代码分开处理，
    • 根据qty更新$_POST['increase']列
      • 如果为1，请增加。如果为0，则递减
    • 抓住qty列的值（虽然我不确定它是否会起作用）
    • 将键入的值'qty'作为json
      • 返回
    • 然后会根据$qty.val(data.qty)
      • 更新您的输入元素
相关问题
最新问题