利用循环获取AJAX传回的值，并将其显示在弹出框里面

最新推荐文章于 2023-10-11 07:20:59 发布

原创最新推荐文章于 2023-10-11 07:20:59 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

AJAX 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何结合Bootstrap的Bootbox插件和AJAX技术，在用户交互时实时获取并展示数据。通过点击文本框触发模态框，并利用AJAX从服务器加载数据，再将这些数据以选项的形式展示给用户进行选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求：点击文本框弹出模态框，利用AJAX获取数据并显示在模态框中

实现方法：利用bootstrap框架里面的bootbox控件，bootbox.prompt显示为提示框。

具体代码如下：

<div class="form-group">
      <label class="col-sm-4 control-label no-padding-right" for="form-field-person">项目人员</label>
          <div class="col-sm-8">
		<textarea class="col-xs-12 col-sm-10" type="text" id="input1" name="person" placeholder=""></textarea>
	  </div>

       <script>	                                                       	                                                           	                                                	    	
	                                                           $(document).on("click","#input1",function(e){
	                                                        	  e.preventDefault();
	                                                        	  var debateModal;
	                                                        	  
	                                                        	  $.ajax({
	                                                        		 url: '${ctx}/user/getUserList.ht',
	                                                        	     type:"POST",
	                                                        	     data:{},
	                                                        	     dataType:'json'	                                                        	    
	                                                        	  }).done(function(info){ 	                                                      		 
	                                                        		 var options = [];
	                                                        		 for(var i=0;i<info.length;i++){
	                                                        			  var user = {};
	                                                        			  user.text = info[i].name;
	                                                        			  user.value = info[i].userName;
	                                                        			  options[i] = user;
	                                                        		  }
	                                                        		  debateModal=bootbox.prompt({
	                                                        			    title: "选择项目人员",
	                                                        			    inputType: 'checkbox',
	                                                        			    inputOptions: options,
	                                                        			    callback: function (result) {
	                                                        			        console.log(result);
	                                                        			    }
	                                                        			});
	                                                        	  }); 
	                                                        	  
	                                                        	  /* $('#input1').on('click', function (e) {
	                                                                  $.ajax({
	                                                                      url: '${ctx}/user/getUserList.ht',
	                                                                      type: 'POST',
	                                                                      dataType: 'json'
	                                                                  }).done(function (result) {
	                                                                      console.log(result.Mensaje);
	                                                                  });
	                                                              }); */
	                                                        	 /*  bootbox.dialog({                 //write like this can get data and display.
	                                                        		 message:'it can work...',
	                                                        		 title:'please choose',
	                                                        		 closeButton:true
	                                                        	  }); */
	                                                           });
	                                                           </script>

最终显示：