首页 新闻 搜索 专区 学院

新手求教,前后端交互问题!

0
悬赏园豆:10 [已解决问题] 解决于 2014-07-23 12:24

搞不懂jquery.ajax post get等等方法实际功能,

虽然知道它们是用来数据交互的,

是用来把后台数据呈现页面上的么?(后台数据一定要依赖JS来传入页面吗?)

还是后台数据取好了之后,通过JS来控制页面成功或失败的行为呢?

我自己是这样理解的:后台取得List列表,通过jquery把列表呈现在页面上(这是前台获取后台数据),

但是像登录一样的功能(用户在前台文本框输入值后)怎么传入后台呀?

骑着蜗牛耍流氓的主页 骑着蜗牛耍流氓 | 初学一级 | 园豆:135
提问于:2014-07-22 14:36
< >
分享
最佳答案
0

说句不好听的,别生气,你直接就是跳过新手过程,跑到高手的园地里,然后看啥都不懂,这样不行的。

建议你先把最简单的网站,WEBFORM也罢,MVC也好,先学会,知道啥是后台,啥是前台。

至于AJAX,简单一点说,这是一个用来避免页面刷新的N种不同技术的结合体。

对于网站设计,最基础的是HTML,WEBFORM也罢,MVC也好,只是为了动态实现HTML,

然后再上一层,为了体验,又有了AJAX,至于JQUERY,就是把AJAX包装了一下,让调用更方便一点,简捷一些。

 

初学WEB开发的人,最容易出现的问题是搞不清楚前台后台的界限。

收获园豆:5
爱编程的大叔 | 高人七级 |园豆:30743 | 2014-07-22 15:00

感觉你说的对啊!我就是个新手啊,但是是在公司做实习生,公司都是经验丰富的大神们,我请教的问题他们给我都快讲晕了

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 15:04

@骑着蜗牛耍流氓: 关键是公司项目是用MVC+easyui做的,让我练习MVC自己做东西学啊

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 15:09

@骑着蜗牛耍流氓: 

初学者,尽量不要问这种大而不当的问题。

问具体问题,不要问抽象问题。比如一个页面

<html>

<body>

  <table>

    <tr><td>货号</td><td>品名</td><td>单价</td></tr>

    <tr><td>S001</td><td>汪星人</td><td>4.50</td></tr>

    <tr><td>S002</td><td>喵星人</td><td>2.50</td></tr>

  </table>

</body>

</html>

a. 这是一个HTML实现的表格。

b. 进一步,我们希望用数据库里面的数据来填充实现显示这个表格。(这就是后台编程了)

c. 再进一步,我们希望在页面上有一个按钮,点下后,直接刷新表格,从后台取数据填充这个表格。(页面不刷新),这就是AJAX了。

d. 最后,我们希望这个表格可以在前台修改(这个麻烦一点点),按下提交按钮,可以将数据传给后台保存。你可以用页面提交转向,学会了以后,再学怎么用AJAX。

e. AJAX要用好,javascript要很熟练,这个可不容易...靠这样问是学不会的。

爱编程的大叔 | 园豆:30743 (高人七级) | 2014-07-22 15:16

@骑着蜗牛耍流氓: 

那你别管AJAX的事就好办多了。MVC还是容易入门的。

爱编程的大叔 | 园豆:30743 (高人七级) | 2014-07-22 15:18

@爱编程的大叔: MVC是学的差不多了,后端MVC结合三层架构业务逻辑代码和增删改查代码都会写,每次一写到VIEW视图部分就发晕,不知道怎么来呈现页面,刚公司断网了

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 16:13

@爱编程的大叔: 以你刚发的那个小例子:

d部分:假如我用的是EF实体框架和MVC

控制器部分:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using BlogDAL; namespace BlogUI.Controllers { public class TestController : Controller { // // GET: /Test/ public ActionResult Index() { return View(); } TestEntities db = new TestEntities(); public ActionResult GetTestList() { var obj = db.Test.ToList(); return Json(obj); } } }
View Code

视图部分:

@{ ViewBag.Title = "Index"; } <table> <tr> <th>货号</th> <th>品名</th> <th>单价</th> </tr> @foreach (var item in Model) { <tr> <td>@item.ID</td> <td>@item.Name</td> <td>@item.price</td> </tr> } </table>
View Code

大致是这样的

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 16:30

@骑着蜗牛耍流氓: 是b部分

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 16:39

@爱编程的大叔: c部分,按钮事件的js不知道怎么写,

点击按钮之后,是通过$.ajax()方法获取后台数据吗?

$.ajax()方法参数其他的都了解一点,特别是data参数,data参数不知道怎么写

data:{xxx:xxx}

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 16:55

@爱编程的大叔: 大叔!

c部分做成这样了:

本来列表是这样的:

<按钮>

编号类型标题内容时间
250 0 娱乐 娱乐 2014/7/21 0:00:00
251 0 封面人物 时尚 2014/7/20 0:00:00
253 0 1 1 2111/1/1 0:00:00

<div id="msg"><div/>

当我点击按钮触发事件:

$(function(){

  $("按钮").click(function(){

    var msg= $.ajax({

      url:'@Url.Action("xxx")',

      async:false

    }); 

    $("#msg").text(msg);

  });

});

这样写了以后,再去点击按钮,有数据出来页面也没有刷新,但是数据全是json格式的,看起来很乱:

[{"LogID":250,"LogTypeID":0,"LogTitle":"娱乐","LogContent":"娱乐","LogDate":"2014/7/21 0:00:00","LogTypeName":"娱乐"},{"LogID":251,"LogTypeID":0,"LogTitle":"封面人物","LogContent":"时尚","LogDate":"2014/7/20 0:00:00","LogTypeName":"情感杂志"}, {"LogID":253,"LogTypeID":0,"LogTitle":"1","LogContent":"1","LogDate":"2111/1/1 0:00:00","LogTypeName":"娱乐"}]

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 17:15

@爱编程的大叔: 下班了,明天继续练习,谢谢大叔耐心指导

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 17:30
其他回答(1)
0

你可以先简单理解为前台JS是用来收集或绑定表单数据,ajax 是将收集到的数据以键值对的形式{name:'chenqi',pwd:'20'}发送到后台,后台是会解析接收到的数据 Request["name"],业务处理并返回 ,多数会以JSON形式返回。

收获园豆:5
陈齐 | 园豆:311 (菜鸟二级) | 2014-07-22 14:48

噢,原来是这样, 我以为是这样子:

后台比如查询到了两个字段 name,pwd

然后前台通过ajax取到name值:

$.ajax({

  url:'@.Url.Action("Index")',

  data:{name:'name'}

});

再把name值绑定到HTML标签上

支持(0) 反对(0) 骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 14:56

是我理解错了吗

支持(0) 反对(0) 骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 14:57

@骑着蜗牛耍流氓: 你这代码的意思是请求后台Index的Action 并传递了name='name' 的一个参数,处理结果要在ajax的回调函数里处理

支持(0) 反对(0) 陈齐 | 园豆:311 (菜鸟二级) | 2014-07-22 15:11

@陈齐: 嗯多谢啦,懂一点了

支持(0) 反对(0) 骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-07-22 15:16
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册