无需重新加载即可显示数据库中的数据

Question

HTML

<textarea>Ask a question</textarea><button class="addquestion">POST</button>

点击按钮后，使用以下的Ajax、Jquery和Laravel将问题添加到数据库中。但是，只有在重新加载后才会显示该问题。如何在存储到数据库后立即单击按钮添加问题？

Ajax和Jquery：

$(document).on('click','.addquestion',function(e)
{
    e.preventDefault();
    var question = $(this).prev().val();
    $.ajax({
        type:"POST",
        url: "{{url('/music/addquestion')}}",
        data: {
        "_token": "{{ csrf_token() }}",
        "question": question
        },
        success: function (data) {
            var res = $.parseJSON(data);
            if(res == true)
            {
                alert('question added!');
            }
        }
    });
});

Laravel控制器

public function addquestion(Request $request)
    {
        if($request->Ajax())
        {
            $question = new Question();
            $question->question=$request->question;
            if($question->save())
            {
                   echo json_encode(TRUE);die;
            }
        }
    }

- Steve

---

首先将 $(this).prev().val(); 追加到内容中，然后保存到数据库中。 - Sanzeeb Aryal

Answer 1

在你的警告框之后这样做。

 if(res == true)
    {
       alert('question added!');
       //Add question here
    }

- David Jiboye

Answer 2

    $(document).on('click','.addquestion',function(e)
    {
        e.preventDefault();
        var question = $(this).prev().val();
       // you can show the question by `question var` from here by using 
       // $('selecter').html(question); or if appending to any input type field
       //$('selecter').val(question); or 
       //you can append it when you got success response
        $.ajax({
            type:"POST",
            url: "{{url('/music/addquestion')}}",
            data: {
            "_token": "{{ csrf_token() }}",
            "question": question
            },
            success: function (data) {
                var res = $.parseJSON(data);
                if(res == true)
                {
                    alert('question added!');
                   // $('selecter').html(question); or 
                  //$('selecter').val(question); 


                }
            }
        });
    });

- Vivek Singh

Answer 3

添加 div 元素。

<textarea>Ask a question...</textarea><button class="addquestion">POST</button>
<div id="question"></div>

将变量进行 JSON 编码：

echo json_encode(array('status'=>TRUE,'question'=>$request->question));die;

显示：

success: function (data) {
            var response = $.parseJSON(data);
            if(response.status == true)
            {
                var question=response.question;
                $('#question').append(question);                
            }

- Sanzeeb Aryal