如何在post ajax函数调用中传递数据

时间:2017-08-02 18:31:58

标签: javascript jquery ajax

我接到电话:

$.ajax({
                type: 'GET',              
                url: '@MvcApplication.SurveyApiUrl',
                success: function (surveyList) {
                    //var htmlString = ''
                    var jsondata = JSON.parse(surveyList);
                    console.log(jsondata);
                    $.each(jsondata.Questions, function (index, data) {
                        if (data.IsHidden) {
                            htmlString = htmlString + '<div class ="hidden" id=' + data.QuestionId + '>&nbsp;&nbsp;&nbsp;&nbsp;'
                            processSurveyQuestions(data);
                            htmlString = htmlString + '</div>'
                        }
                        else {
                            htmlString = htmlString + '<div>&nbsp;&nbsp;&nbsp;&nbsp;';
                            processSurveyQuestions(data);
                            htmlString = htmlString + '</div>';
                        }
                    });
                    htmlString = htmlString + '<br> <button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>';
                    $('#Questions').html(htmlString);
                },
                error: function () { console.log("Error occured calling the service") }
            })

电话会议:

  $.ajax({
            type: "Post",

            url: '@MvcApplication.SurveyApiUrl',
            data : {'SurveyId':4,
                'SurveyAnswerString': formData
            },
            Success: function () { console.log("this is successful") },
            error: function(error){console.log("error occured calling service")}
        });
        document.getElementById("Questions").reset();

我的网址中的问题是根据点击1或2或3或4的调查加载的。 http://localhost:49754/Survey?id=1 http://localhost:63325/api/SurveyList/1

如何根据点击的调查ID动态传递调查ID。请帮忙。 我的HTML

<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

@{
    ViewBag.Title = "CustomerSatisfaction";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@*@Model SurveyApplication.Models.ISurveyQuestion*@

<script>
    var objectData = new Object();
    var htmlString = '';
    $(document).ready(function () {
        $(function () {
            $.ajax({
                type: 'GET',              
                url: '@MvcApplication.SurveyApiUrl',
                success: function (surveyList) {
                    //var htmlString = ''
                    var jsondata = JSON.parse(surveyList);
                    console.log(jsondata);
                    $.each(jsondata.Questions, function (index, data) {
                        if (data.IsHidden) {
                            htmlString = htmlString + '<div class ="hidden" id=' + data.QuestionId + '>&nbsp;&nbsp;&nbsp;&nbsp;'
                            processSurveyQuestions(data);
                            htmlString = htmlString + '</div>'
                        }
                        else {
                            htmlString = htmlString + '<div>&nbsp;&nbsp;&nbsp;&nbsp;';
                            processSurveyQuestions(data);
                            htmlString = htmlString + '</div>';
                        }
                    });
                    htmlString = htmlString + '<br> <button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>';
                    $('#Questions').html(htmlString);
                },
                error: function () { console.log("Error occured calling the service") }
            })
        })
    });
</script>
<header>
    <div id="SiteText" class="SiteText"><h1>Survey</h1></div>
</header>
<div class="body-content">
    <div class="form-content">
        <form id="Questions">
            <button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>
        </form>
    </div>
</div>
<script>
    function submitForm() {
        var formData = $('#Questions').serialize();
        document.getElementById("Questions").reset();
        $.ajax({
            type: "Post",

            url: '@MvcApplication.SurveyApiUrl',
            data : {'SurveyId':4,
                'SurveyAnswerString': formData
            },
            Success: function () { console.log("this is successful") },
            error: function(error){console.log("error occured calling service")}
        });
        document.getElementById("Questions").reset();
    }

    function toggleDiv(id, removeIds) {

        hideDiv(removeIds);
        $('#' + id).removeClass('hidden');
    };


    function hideDiv(id) {
        if (objectData[id] != undefined) {
            for (i = 0; i < objectData[id].length; i++) {
                $('#' + objectData[id][i]).addClass('hidden');
                if (objectData[objectData[id][i]] != undefined) {
                    var itemdivs = objectData;
                    var itemdiv = itemdivs[id][i];
                    if (itemdiv != undefined) {
                        for (j = 0; j < itemdivs[itemdiv].length; j++) {
                            $('#' + itemdivs[itemdiv][j]).addClass('hidden');
                            $('#' + itemdivs[itemdiv][j]).val($("#name option[selected]").val());

                        }
                    }
                }
            }
        }
    }
    function toggleCheckBox(checkbox, id) {
        if (checkbox.checked) {
            $('#' + id).removeClass('hidden');
        }
        else {
            $('#' + id).addClass('hidden');
        }
    }

    function processSurveyQuestions(data) {
        htmlString = htmlString + '<p><strong>' + data.QuestionValue + '</strong></p>';
        if (data.InputType == "SingleLineTextBox") {
            htmlString = htmlString + '<input type= "text" name=' + data.QuestionId + '></input>';
        }
        if (data.InputType == "MultiLineTextBox") {
            htmlString = htmlString + '<textarea name=' + data.QuestionId + '></textarea>';
        }
        if (data.InputType == "SingleSelect") {
            var removeIds = new Array();
            $.each(data.Options, function (index, oD) {
                if (oD.ChildQuestionId > 0) {
                    removeIds.push(oD.ChildQuestionId);
                }
            });
            objectData[data.QuestionId] = removeIds;
            htmlString = htmlString + '<div>';
            $.each(data.Options, function (index, optionData) {
                htmlString = htmlString + '&nbsp;&nbsp;&nbsp;&nbsp;<input type ="radio" onclick="toggleDiv(' + optionData.ChildQuestionId + ',' + data.QuestionId + ')" name=' + data.QuestionId + ' value=' + optionData.OptionValue + '>' + optionData.OptionValue + '&nbsp;&nbsp;&nbsp;&nbsp;</input>';
            })

            htmlString = htmlString + '</div>';
        }

        if (data.InputType == "MultiSelect") {
            htmlString = htmlString + '<div>';
            $.each(data.Options, function (index, optionData) {
                htmlString = htmlString + '&nbsp;&nbsp;&nbsp;&nbsp;<input type ="checkbox" onclick="toggleCheckBox(this,' + optionData.ChildQuestionId + ')" name=' + data.QuestionId + ' value=' + optionData.OptionValue + '>' + optionData.OptionValue + '&nbsp;&nbsp;&nbsp;&nbsp;</input>';
            })
            htmlString = htmlString + '</div>';
        }

        if (data.InputType == "SingleSelectDropdown") {
            var removeIds = new Array();
            $.each(data.Options, function (index, oD) {
                if (oD.ChildQuestionId > 0) {
                    removeIds.push(oD.ChildQuestionId);
                }
            });
            objectData[data.QuestionId] = removeIds;
            htmlString = htmlString + '<div>';
            htmlString = htmlString + '<select>';
            $.each(data.Options, function (index, optionData) {
                htmlString = htmlString + '<option  onclick="toggleDiv(' + optionData.ChildQuestionId + ',' + data.QuestionId + ')" name=' + data.QuestionId + ' value=' + optionData.OptionValue + '>' + optionData.OptionValue + '</option>';
            })
            htmlString = htmlString + '</select>';
            htmlString = htmlString + '</div>';
        }
    }
</script>

0 个答案:

没有答案