个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 15:49:23 25 4
gpt4 key购买 nike

我有一个带有两个选择下拉菜单的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>

这是我的 Controller 。基于在索引页面中选择的值并单击比较按钮，我正在调用ajax函数，该函数调用 Controller 。在 Controller 中，我正在传递选定的值，并从数据库中检查它们是否相同，并且基于响应，我需要在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函数中的 Controller 接收响应。并在index.gsp页面中显示结果

最佳答案

请研究并了解gsp和 Controller 中的修复程序
这是您的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>

这是您的 Controller 固定的 
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()
                      } 
                    }
                });
  }
})

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

关于javascript - 在GSP页面文本区域中显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42089898/

25 4 0
文章推荐： grails - 如何使用grails调用域名为变量的Domain方法？
文章推荐： jquery - 如何获得对同一GSP页面的回复
文章推荐： grails - 升级到Grails 3.2，现在JSP将无法渲染
文章推荐： javascript - Textarea没有显示结果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com