jquery - 如何基于ajax响应显示/隐藏div?

标签 jquery ajax grails

现在,我有两个Web服务。一个是我的主应用程序,另一个是返回JSON数据。我试图显示/隐藏一个div,该div基于我作为帖子响应得到的JSON数据中的值。添加此逻辑的最佳方法/位置是什么/位置?这是到目前为止我所拥有的一些代码。 ajax调用工作正常,我能够根据响应呈现消息,但是我不确定基于ajax响应显示/隐藏div的逻辑。谢谢。

Controller Action :

def checkItemProperty() {
  def service = new MyService()
  def itemInstance = new Item(params)
  String itemProperty = itemInstance.itemProperty

  if (service.checkItemCondition(itemProperty)) {
    render "Property is true"
  }
  else {
    render "Property is false"
  }
}

gsp头代码段:
<g:javascript library="jquery" />
<g:javascript>
  $(document).ready(function() {
    $("#showHideDiv").hide();
    $("#someClickableLink").click(function(){ $("#showHideDiv").show(); });
  });
</g:javascript>

gsp主体代码段:
<g:formRemote name="testForm" url="[action:'checkItemProperty']" update="[success: 'message', failure: 'error']">
  <g:textField name="itemProperty" value="${itemInstance?.itemProperty}" />
  <g:actionSubmit type="submit" name="add" value="Check" />
  <span id="message"></span>
  <span id="error"></span>
</g:formRemote>

<div id="showHideDiv">...</div>

编辑:
服务方法:
def checkItemCondition(String itemProperty) {
  def test = new RESTClient('http://localhost:8081/test/')
  def testResponse = test.post(path : 'test.json', body : [status:itemProperty, source:'httpbuilder'], requestContentType : URLENC)
  def jsonObject = testResponse.getData()
  return jsonObject['itemResponse']
}

编辑:
我如何为上述 Controller 操作构造JSON数据:
def test = [:]
test.value = true
test.text = 'Property is true'
render test as JSON

最佳答案

您必须更改 Controller :

Controller :

render [value: true, text: "Property is true"] as JSON

要么
render [value: false, text: "Property is false"] as JSON

GSP(删除update属性):
<g:formRemote ... onSuccess="handleResponse(data)">

JavaScript:
function handleResponse(data) {
$("#message").html(data.text);
if (data.value) {
 $("#showHideDiv").show();
}
else {
 $("#showHideDiv").hide();
}
}

关于jquery - 如何基于ajax响应显示/隐藏div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16699056/

相关文章:

javascript - 更改切换 div 上的文本

javascript - 如何隐藏工具提示?

javascript - 在 WordPress 中使用 JavaScript 提交表单后,页面立即重新加载

eclipse - 在grails中使用graphql插件最终会导致:java.lang.ClassNotFoundException:org.grails.compiler.web.converters.RenderConverterTrait

javascript - 在 href 上触发弹出窗口 - 请登录消息

javascript - 获取位置A的位置并计算其到位置B的距离

javascript - .ajax 和 .click 不想在简单的联系表单上为我工作

javascript - Rails 中神圣的 javascript 选项!帮助!

grails 3.1.3 具有弱引用 setter 的多个数据源不起作用

eclipse - Grails项目:运行方式(在服务器上运行)vs运行方式(run-app)