javascript - $.ajax({}) 能否在js函式中呼叫?
伊谢尔伦
伊谢尔伦 2017-07-05 10:47:48
0
3
832

1.想做問卷調查。頁面中有多個題目,每個題目下方有多個選項,最後有一個提交按鈕,提交時判斷使用者是否登入。題目和選項都是在jsp頁面中透過$.ajax從後台動態取得以html形式顯示在前台。現在提交時需要取得選擇的項目和題目將其存入後台的資料庫中,以便後台統計。

2.form表單

<form id="myform" name="myform" method="post">
    <p class="sub730">
        <p class="rightTitleStyle" id="rightTitle">
            <span>有奖调查</span>
        </p>
        <p id="contentp">
            <p class="newsLeftLayoutOp sceneRightLayout">

                <p class="newsDetailContent">
                    <h2>${iyInvestigate.title}</h2>
                    <p class="newsDetailConMsg">
                        <span>发布时间:</span> <span>${iyInvestigate.createTime}</span> <span>活动结束时间:</span>
                        <span>${iyInvestigate.endtime}</span>
                    </p>
                    <p>
                        <span>${iyInvestigate.summary}</span>
                    </p>

                    <p id="optionp" class="test_content_nr"></p>
                    <p class="col-lg-9 col-lg-offset-3">
                            <a id="sub" href="javascript:void(0)" onclick="submitAnswer();">提交</a>
                    </p>
                </p>

            </p>
        </p>
    </p>
</p>
</form>

動態載入題目和選項

    <script type="text/javascript">

    $(document).ready(function(){
      $.ajax({
             type : "post",
             dataType : "json",
             url : "${ctx}/website/yjdc/investigate/findInvestigateOptionByPage.action",
             data : {"id":'${iyInvestigate.id}'},
             success: function(rec){    
                var root = "${ctx}";
                var optionlist = rec.investigateOpList;
                var opHTML = '<ul>';
                for(var i = 0;i<optionlist.length;i++){
                    var option = optionlist[i];
                    
                    opHTML += '<li name="optionTitle" id="qu_0_'+i+'">';
                    opHTML += '<p name="pOptionTitle" class="test_content_nr_tt" id="p_0_'+i+'">'+ option.subject +'</p>';                    

                    opHTML += '<p class="test_content_nr_main">';
                    opHTML += '<ul>';
                    var deoption = option.options;
                    var deoptionsArr = new Array();
                    deoptionsArr = deoption.split("|");   //选项按照|分割开
                    for (var j = 0; j<deoptionsArr.length;j++){
                    
                        opHTML += '<li name="liSelect" class="option">';
                        opHTML += '<input id="0_answer_'+i+'_option_'+j+'" class="radioOrCheck" name="answer'+i+'" type="radio">'+deoptionsArr[j];
                        //opHTML += '<label for="0_answer_'+i+'_option_'+j+'">'+'<p class="ue" style="display: inline;">'+deoptionsArr[j]+'</p>'+'</label>';
                        opHTML += '</li>';
                        
                    }
                    opHTML += '</ul>';
                    opHTML += '</p>';
                    opHTML += '</li>';
                }
                opHTML += '</ul>';
                $('#optionp').html(opHTML);
             }
        })
    });
</script>

提交函數submitAnswer()

function submitAnswer(){
    var userid = "${sessionScope.user.id}";
    if(userid == '')
    {
        alert("未登录,跳转登录页面!");
        var dt = new Date();
        var urlRoot = window.location.pathname;
        var urlParameter = window.location.search;
        var url = urlRoot + urlParameter;
        window.location.href = "${pageContext.request.contextPath}/web/index/toLogin.action?url="+url+"&dt="+dt.getTime();
    } else {
    var k = document.getElementById('sub').innerText;
    var investigateTitle = "${iyInvestigate.title}";
    var indvestigateID = "${iyInvestigate.id}";
   
    //获取同一个主题活动下的题目集合
    var subjectTitleCountObj = document.getElementsByName("pOptionTitle");
    //var optionSelectCount = document.getElementsByName("liSelect").length;
    
    //获取每一道题目以及相应的选项
    for (var k=0;k < subjectTitleCountObj.length;k++){
        //ids = optionTitleCountObj[k].id;
        
        //存储题目
        var subject = $("#p_0_"+ k).text();
        //var val_ = $('input[type="radio"][name="answer'+k+'"]:checked').val();
        
        //存储选中的项
        var selectItem  = "";  
        var radios = document.getElementsByName("answer"+k);
        for (r = 0; r < radios.length;r++) {
            if (radios[r].checked) {
                selectItem = radios[r].nextSibling.data;
            }
        };
        
        
        $.ajax({
            type : "post",
            dataType : "json",
            url : "${ctx}/website/yjdc/investigate/submitAnswer.action",
            data : {"investigateTitle": ${iyInvestigate.title},"investigateID":${iyInvestigate.id},"subjectOp":subject,"selectItemOp":selectItem,"userid":${sessionScope.user.id}},
            success : function(rec)
                        {
                        }
        });
        
//         for (var j=0; j<optionSelectCount;j++){
//             var select = $("#0_answer_"+k+"_option_"+j).text();
//             $("input:radio:checked").val();
//         }
        
        
    }
    }
}
</script>

3.現在的問題是在 function submitAnswer() {} 中加$.ajax({})根本進不了js函數submitAnswer。去掉$.ajax({})才可以執行submitAnswer函數。

請各位大神指教。

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回覆(3)
洪涛

將ajax中data參數下的值用單引號新起來就好了,見如下碼
data : {"investigateTitle": '${iyInvestigate.title}',"investigateID":'${iyInvestigate.id} ',"subjectOp":'subject',"selectItemOp":'selectItem',"userid":'${sessionScope.user.id}'},

曾经蜡笔没有小新

寫個 console.log 看看函數到底有沒有進去。


再者,你這個寫法:

<a id="sub" href="javascript:void(0)" onclick="submitAnswer();">提交</a>

為什麼在 js 檔案中綁定事件:

html

<a id="sub" href="#">提交</a>

js

$('#sub').click(function(){
    submitAnswer();
});
迷茫

你把你的submitAnswer()放到$(document).ready(function(){})試試看

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板