在GSP页面文本区域中显示数据

时间:2017-02-07 12:26:16

标签: javascript jquery grails

我有一个带有两个选择下拉列表的gsp页面。根据我选择的值并单击比较按钮,它从数据库中检索值并进行操作。 (如比较)如果它们在相同的gsp页面中是相同的打印,因为它们是相同的。如果它们不相同,那么该值必须在索引gsp页面中与两个文本区域并排显示。

this is my gsp page

   <!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Json Compare</title>

<g:javascript plugin="jquery" library="jquery" src="jquery/jquery-1.7.2.js"/>
    <script>
    $(document).ready(function(){
        $('.testMe').click(function(){
            var URL="${createLink(controller:'jsonComparison',action:'compare')}";
            alert(URL)
            alert(firstText.value)
            alert(secondText.value)
            $.ajax({
                url:URL,
                data: {firstText:firstText.value,secondText:secondText.value},
                success: function(data){
                    //console.log(resp);

                    $("#result").val(data).show()

                }
            });
        });
    });

    </script>


</head>
<body>
    <g:form>
        <div></div><label>From Time</label><g:select name="firstText" from="${eventsList}"  noSelection="['':'-Choose the From Date-']"/> 
        <label>To Time</label><g:select name="secondText" from="${eventsList}"  noSelection="['':'-Choose the To Date-']"/></div>
        <button class="testMe">Compare</button>
        <br>
        <textarea id="result" style="display: none"></textarea>
        <%-- <textarea id="result1" style="display:none"></textarea> <textarea id ="result1" style="display:none"></textarea> --%>
    </g:form>
</body>
</html>

这是我的控制器。根据索引页面中选择的值,然后单击比较按钮,我调用一个调用控制器的ajax函数。在控制器中,我传递选定的值并检查数据库是否相同,并根据响应我需要在index.gsp中显示消息

 class JsonComparisonController {

    def preparedStatementService


    def index() {
        //List eventsList = preparedStatementService.retrieveValuesFromDb()
        def eventsList = ['2017-10-11 04.94.34', '2016-09-11 04.94.44', '2017-10-12 04.94.89']
        render view: 'index', model: [eventsList: eventsList]
    }

    def compare() {
        println "The Compare is called"
        String firstParameter = params.firstText
        String secondParameter = params.secondText
        def returnValue
        println "The first value is: " + firstParameter + "The second value is: " + secondParameter
        if(firstParameter !=null && secondParameter !=null && firstParameter.length() > 0 && secondParameter.length() > 0){
            println "Both the values are not null"
            if(firstParameter.equals(secondParameter)){
                println "First and second values are equal"
                returnValue = "The Json are Equal and no MisMatch"
                render status: 200, text: returnValue
            }else{
                println "The values are not equal"
                String value1 = "The First Json values"
                String value2 = "The Second Json Values"
                render status: 200, model:[firstText:value1,secondText:value2]
            }

        }else{
            render status: 200, text: "Please select the Time"
        }

    }
}

我如何从ajax函数中的控制器接收响应。并在index.gsp页面中显示结果

1 个答案:

答案 0 :(得分:0)

请研究并了解gsp&amp ;;调节器 这是你的gsp修复:

<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Json Compare</title>
<g:javascript plugin="jquery" library="jquery" src="jquery/jquery-1.7.2.js"/>
    <script>
    $(document).ready(function(){
        $('.testMe').click(function(){
            var URL="${createLink(controller:'jsonComparison',action:'compare')}";
            alert(URL)
            alert(firstText.value)
            alert(secondText.value)
            $.ajax({
                url:URL,
                data: {firstText:firstText.value,secondText:secondText.value},
                success: function(data){
                  if (data.status===true) {
                     //notice .html since it is content of textArea
                     $('#result1').html(data.result)
                     //if this was <input type=text value="something"
                     //then result would be the value of the form field
                     //$('#result1').val(data.result)
                  } else { /// if (data===false ) {
                        $('#result1').html(data.value1).show()
                        $('#result2').html(data.value2).show()
                  } 
                }
            });
        });
    });
    </script>
</head>
<body>
    <g:form>
        <div></div><label>From Time</label><g:select name="firstText" from="${eventsList}"  noSelection="['':'-Choose the From Date-']"/> 
        <label>To Time</label><g:select name="secondText" from="${eventsList}"  noSelection="['':'-Choose the To Date-']"/></div>
        <button class="testMe">Compare</button>
        <br>
        <textarea id="result" style="display: none"></textarea>
        <%-- <textarea id="result1" style="display:none"></textarea> <textarea id ="result1" style="display:none"></textarea> --%>
    </g:form>
</body>
</html>

这是您的控制器已修复

class JsonComparisonController {

    def preparedStatementService


    def index() {
        //List eventsList = preparedStatementService.retrieveValuesFromDb()
        def eventsList = ['2017-10-11 04.94.34', '2016-09-11 04.94.44', '2017-10-12 04.94.89']
        render view: 'index', model: [eventsList: eventsList]
    }

    def compare() {
        String firstParameter = params?.firstText   //make it nullsafe not going to throw an exception with ?
        String secondParameter = params?.secondText
        def returnValue
        //this is doing exactly what you were doing long winded
        def reply
        if(firstParameter && firstParameter) {
            if (firstParameter == firstParameter ){
                reply=[status:true, result:"The Json are Equal and no MisMatch"]                
            }else{
                reply = [status:false, value1:"The First Json values ${firstParameter}", value2:"The Second Json Values ${secondParameter}"]               
            }
        }else{
            reply = [status:false, value1:"issue here", value2:"issue here"]       
        }
        render status: 200, text:(reply as JSON).toString()
    }
}

而不是点击我按钮就可以

$('#secondText').on('change', function() {

 var val = $(this).val();
 var other = $('#firstText').val();
  if (val!='' && other!='') {
var URL="${createLink(controller:'jsonComparison',action:'compare')}";
                alert(URL)
                alert(val)
                alert(other)
                $.ajax({
                    url:URL,
                    data: {firstText:val,secondText:other},
                    success: function(data){
                      if (data.status===true) {
                         //notice .html since it is content of textArea
                         $('#result1').html(data.result)
                         //if this was <input type=text value="something"
                         //then result would be the value of the form field
                         //$('#result1').val(data.result)
                      } else { /// if (data===false ) {
                            $('#result1').html(data.value1).show()
                            $('#result2').html(data.value2).show()
                      } 
                    }
                });
  }
})

然后在更改第二个字段时自动触发