Question

我正在使用剔除（snockout.js）提供各种调查形式，我想获取反馈并将其通过ajax调用发布到我的laravel服务器。我相信我正确使用了ajax部分，laravel部分很好，但是整个javascript内容对我来说是新的。陡峭的学习曲线。

我已经在HTML中绑定了模型元素，已经安装了ajax调用，但这只是两者之间的一点点，我无法取胜的javascript / knockout。

如何通过单击按钮获取所有调查答案？

HTML

....
<td>
   <input type="radio" name="Q1" value="1" data-bind="checked: radioSelectedOptionValue"> Poor    
   <input type="radio" name="Q1" value="2" data-bind="checked: radioSelectedOptionValue"> Unsatisfactory   
   <input type="radio" name="Q1" value="3" data-bind="checked: radioSelectedOptionValue"> As expected
   <input type="radio" name="Q1" value="4" data-bind="checked: radioSelectedOptionValue"> Satisfactory
   <input type="radio" name="Q1" value="5" data-bind="checked: radioSelectedOptionValue"> Excellent
<textarea name="Q1comment" rows="1" cols="50">Comments</textarea>
</td>
<button data-bind="click: SurveyViewModel">Submit</button>
....

绑定

<script>
ko.applyBindings(new SurveyViewModel());
</script>

javascript

function SurveyViewModel() {
    this.Q1 = ko.observable(data.Q1);
    this.Q1comment = ko.observable(data.Q1Comment);
    alert(data.Q1);

    var thisOneEvaluation = {};
    thisOneEvaluation['answers'] = JSON.stringify(this.data);
    alert("The results are:" + JSON.stringify(this.data));
//        sendDataToServer(this.data);
}

function sendDataToServer(survey) {
//send Ajax request to your web server.
alert("Sending Data to Server...");
$.ajax({
    type:"POST",
    url:"/evaluations",
    contentType: "application/json; charset=utf-8",
    headers: {
      'CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: ko.toJSON(self),
})

.done(function(data) {
    $('#status').html(data);
    if (result.url) {
        location.href = result.url;
    }
})

.fail(function(xhr) {
    $('#status').html("Failed");
});

}

Answer 1

看来您实际上并没有捕获复选框或注释值。您需要为它们两者定义可观察对象。
您似乎还拥有一个名为data的变量，我无法告诉您您是否已经在代码的其他位置定义了该变量，或者您认为该变量已被自动定义。
您不能使用SurveyViewModel提交表单。 SurveyViewModel的唯一目的是充当HTML的viewModel。

以下是一些更正：

HTML

<td>
<input type="radio" name="Q1" value="1" data-bind="checked: radioSelectedOptionValue"> Poor    
<input type="radio" name="Q1" value="2" data-bind="checked: radioSelectedOptionValue"> Unsatisfactory   
<input type="radio" name="Q1" value="3" data-bind="checked: radioSelectedOptionValue"> As expected
<input type="radio" name="Q1" value="4" data-bind="checked: radioSelectedOptionValue"> Satisfactory
<input type="radio" name="Q1" value="5" data-bind="checked: radioSelectedOptionValue"> Excellent
<!-- Called a new observable called 'comment' -->
<textarea name="Q1comment" rows="1" cols="50" data-bind="value: comment">Comments</textarea>
</td>
<!-- Called a new function called 'submitData' -->
<button data-bind="click: submitData">Submit</button>

JAVASCRIPT

function SurveyViewModel() {
//You need to define this in your viewModel for the checkbox values to get registered. I am defining at as an observableArray because 'checked' binding can take multiple values.
this.radioSelectedOptionValue = ko.observableArray();
//To capture the comment:
this.comment = ko.observable();
//To get all data and send to server
this.submitData = function(){
    var jsonData = {
        'selectedOptions': this.radioSelectedOptionValue(),
        'comment': this.comment()
    }
    sendDatatoServer(jsonData);
};

this.Q1 = ko.observable(data.Q1);
this.Q1comment = ko.observable(data.Q1Comment);
alert(data.Q1);

var thisOneEvaluation = {};
thisOneEvaluation['answers'] = JSON.stringify(this.data);
alert("The results are:" + JSON.stringify(this.data));
//        sendDataToServer(this.data);
}

function sendDataToServer(survey) {
//send Ajax request to your web server.
alert("Sending Data to Server...");
$.ajax({
    type:"POST",
    url:"/evaluations",
    contentType: "application/json; charset=utf-8",
    headers: {
      'CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    //it is already in JSON format
    data: survey,
})

.done(function(data) {
    $('#status').html(data);
    if (result.url) {
        location.href = result.url;
    }
})

.fail(function(xhr) {
    $('#status').html("Failed");
});

怎么使用knockout.js提交所有内容？

1 个答案: