How to call json webservices method in HTML page using Jquery

Question

5.00/5 (1 vote)

See more:

How to call web services mwethod in html page my script like this

JavaScript

<script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
      
           
            $("#btnok").click(function () {
                //alert('');
                $.ajax({
                    type: "POST",
                    url: "http://localhost:3658/HostingService.asmx/SETPostJobDetails",
                    data: "{title:'" + $("#title").val() + "',C.Name:'" + $("#name").val() + "',city:'" + $("#city").val() + "',state:'" + $("#state").val() + "',date:'" + $("#date").val() + "',duration:'" + $("#duration").val() + "',pay:'" + $("#pay").val() + "',industry:'" + $("#industry").val() + "',type:'" + $("#type").val() + "',status:'" + $("#status").val() + "',description:'" + $("#description").val() + "',qualification:'" + $("#qualification").val() + "',}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    error: OnError
                });
            });
        });

        function OnSuccess(data, status) {
            alert('The addition of two number is : ' + data.d);
        }

        function OnError(data, status, error) {
            alert(data.d);
        }      
    </script>

my html page

HTML

<tr>
    <td width="25%" align="left" valign="middle">
        Job ID :
    </td>
    <td width="75%" align="left" valign="middle">
        <input id="id" type="text" class="textbox2" name="name" size="30">
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Title :
    </td>
    <td align="left" valign="middle">
        <input id="title" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Enter Company Name :
    </td>
    <td align="left" valign="middle">
        <input id="name" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        City :
    </td>
    <td align="left" valign="middle">
        <input id="city" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        State :
    </td>
    <td align="left" valign="middle">
        <input id="state" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Post Date :
    </td>
    <td align="left" valign="middle">
        <input id="date" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Duration :
    </td>
    <td align="left" valign="middle">
        <input id="duration" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Pay Rate :
    </td>
    <td align="left" valign="middle">
        <input id="pay" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Industry :
    </td>
    <td align="left" valign="middle">
        <input id="industry" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Type :
    </td>
    <td align="left" valign="middle">
        <input id="type" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Enter Job Status :
    </td>
    <td align="left" valign="middle">
        <input id="status" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Description :
    </td>
    <td align="left" valign="middle">
        <textarea id="description" name="" cols="" rows="" class="textarea1">&nbsp;</textarea>
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Qualification :
    </td>
    <td align="left" valign="middle">
        <textarea id="qualification" name="" cols="" rows="" class="textarea1">&nbsp;</textarea>
    </td>
</tr>
<tr>
    <td align="center" valign="middle">
        &nbsp;
    </td>
    <td align="center" valign="middle">
        <input id="btnok" name="Submit" type="button" value="Submit" class="btn2" border="0" /><input
            name="reset" type="button" value="Reset" class="btn2" border="0" />
    </td>
</tr>

please help me

thanks and regards

Posted 2-Jan-13 23:42pm

Santhosh23

Updated 2-Jan-13 23:52pm

DaveAuld

v2

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 3-Jan-13 7:28am

Are you facing any problem with this code?
If yes, please tell us the problem.

Santhosh23 3-Jan-13 8:10am

Yes, get the OnError alert box, and i dont get the data values and always i got undefined values in alert box. and object xmlhttprequest error.. this is are me facing the problems. please help me.. thank and regards

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 3-Jan-13 8:43am

Write URL like below...
url: "HostingService.asmx/SETPostJobDetails".
Check if it works or not?

Santhosh23 3-Jan-13 9:08am

just now am tired.. but not working and already i added [ScriptService] method in .asmx page..

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 3-Jan-13 9:24am

Then please post the codes of asmx service.

Santhosh23 3-Jan-13 9:33am

ok this is my services code

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string SETPostJobDetails(string Title, string Type, string Description, string Qualification, string Compensation, string openings, string city,
string state, string name, string phone, string email, string date, string zipcode, string job_categories, string client_id)
{
DataSet ds = new DataSet();
try
{
SqlDataAdapter adp = new SqlDataAdapter();
adp.SelectCommand = new SqlCommand();
adp.SelectCommand.CommandType = CommandType.StoredProcedure;
adp.SelectCommand.Connection = (SqlConnection)OpenConnection1();
adp.SelectCommand.CommandText = "SP_POST_JOBDETAILS_SET";
SqlParameter[] Parameters = new SqlParameter[15];
Parameters[0] = new SqlParameter("@JOB_TITLE", SqlDbType.VarChar, 100);
Parameters[0].Value = Title;

Parameters[1] = new SqlParameter("@JOB_TYPE", SqlDbType.VarChar, 50);
Parameters[1].Value = Type;

Parameters[2] = new SqlParameter("@DESCRIPTION", SqlDbType.VarChar, 5000);
Parameters[2].Value = Description;

Parameters[3] = new SqlParameter("@QUALIFICATIONS", SqlDbType.VarChar, 1000);
Parameters[3].Value = Qualification;

Parameters[4] = new SqlParameter("@COMPENSATION_RANGE", SqlDbType.VarChar, 200);
Parameters[4].Value = Compensation;

Parameters[5] = new SqlParameter("@NO_OF_OPENINGS", SqlDbType.VarChar, 50);
Parameters[5].Value = openings;

Parameters[6] = new SqlParameter("@CITY", SqlDbType.VarChar, 200);
Parameters[6].Value = city;

Parameters[7] = new SqlParameter("@STATE", SqlDbType.VarChar, 100);
Parameters[7].Value = state;

Parameters[8] = new SqlParameter("@CONTACT_NAME", SqlDbType.VarChar, 500);
Parameters[8].Value = name;

Parameters[9] = new SqlParameter("@CONTACT_PHONE", SqlDbType.VarChar, 50);
Parameters[9].Value = phone;

Parameters[10] = new SqlParameter("@EMAIL", SqlDbType.VarChar, 100);
Parameters[10].Value = email;

Parameters[11] = new SqlParameter("@START_DATE", SqlDbType.DateTime);
Parameters[11].Value = Convert.ToDateTime(date);

Parameters[12] = new SqlParameter("@ZIPCODE", SqlDbType.VarChar, 20);
Parameters[12].Value = zipcode;

Parameters[13] = new SqlParameter("@JOB_CATEGORIES", SqlDbType.VarChar, 200);
Parameters[13].Value = job_categories;

Parameters[14] = new SqlParameter("@CLIENT_ID", SqlDbType.Int);
Parameters[14].Value = int.Parse(client_id);

adp.SelectCommand.Parameters.AddRange(Parameters);
adp.Fill(ds);
string[][] JaggedArray = new string[ds.Tables[0].Rows.Count][];
//int i = 0;
//Dictionary<object, object> resultMain = new Dictionary<object, object>();
List<object> resultMain = new List<object>();
foreach (DataRow rs in ds.Tables[0].Rows)
{

Dictionary<string, object=""> result = new Dictionary<string, object="">();

foreach (DataColumn dc in ds.Tables[0].Columns)
{

result.Add(dc.ColumnName, rs[dc].ToString());

}

resultMain.Add(result);

//i = i + 1;
}

JavaScriptSerializer js = new JavaScriptSerializer();

string strJSON = js.Serialize(resultMain);
return strJSON;
}
catch

Santhosh23 4-Jan-13 2:24am

i got the new error in like. this error shows firebug
Error while calling a function using jquery-ajax ("NetworkError: 500 Internal Server Error)

Tharaka MTR 3-Jan-13 10:28am

could you please modify your error function as follows and give us the output

function OnError(data, status, error) {
alert(data.responseText);
}

Santhosh23 4-Jan-13 1:58am

hi tharaka MTR,
just now am modify the script in On-error function. but it shows the empty alert box only. how to solve my problem please help me.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tharaka MTR · Answer 1 · 2013-01-03T02:29:00

Solution 1

First you have to check whether your web service is configured to access using client side script. If not, it will raise the error message “500 – Internal server error”.
To call the webservice using client side scipt, web service should configure with [ScriptService] attribute.

For more details how to do this please check the following URL
http://tharakaweb.com/2013/01/01/web-service-and-script-service/[^]

by changing the error function you can see the detail error response as follows

JavaScript

function OnError(data, status, error) {
      alert(data.responseText);
}

see the error message, it is occurred due to the serialization issue. Please check Dictionary object and serialization

{"Message":"Cannot convert object of type "System.String" to type "System.Collections.Generic.IDictionary`2[System.String,System.Object]","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}

Posted 3-Jan-13 2:29am

Tharaka MTR

Updated 3-Jan-13 23:33pm

v3

Comments

Santhosh23 4-Jan-13 4:28am

{"Message":"Cannot convert object of type \u0027System.String\u0027 to type \u0027System.Collections.Generic.IDictionary`2[System.String,System.Object]\u0027","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}

i got the this type errors on my alert. am modifythe my script like below

<script language="javascript" type="text/javascript">

$(document).ready(function () {

$("#btnok").click(function () {

var title = $("#title").val();
var name = $("#name").val();
var city = $("#city").val();
var state = $("#state").val();
var date = $("#date").val();
var duratin = $("#duration").val();
var pay = $("#pay").val();
var type = $("#type").val();
var industry = $("#industry").val();
var status = $("#status").val();
var description = $("#description").val();
var qualification = $("#qualification").val();
// var data = { title: title, Name: name, city: city, state: state, date: date, duration: duratin, pay: pay, industry: industry, type: type, status: status, description: description, qualification: qualification };
var data = { title:$("#title").val(),name: $("#name").val(), city: $("#city").val(), state: $("#state").val(), date: $("#date").val(),duration:$("#duration").val(),pay:$("#pay").val(),type: $("#type").val(),industry:$("#industry").val(),status:$("#status").val(),description:$("#description").val(),qualification: $("#qualification").val() };
var data = JSON.stringify(data);
alert(data);
$.ajax({
type: "POST",
url: "http://localhost:3658/HostingService.asmx/SETPostJobDetails",
data:JSON.stringify(data),//"{'title':" + title + ",'C.Name':" + name + ",'city':" + city + ",'state':" + state + ",'date':" + date + ",'duration':" + duratin + ",'pay':" + pay + ",'industry':" + industry + ",'type':" + type + ",'status':" + status + ",'description':" + description + ",'qualification':" + qualification + "}",
// data: // "{'title':'" + $("#title").val() + "','C.Name':'" + $("#name").val() + "','city':'" + $("#city").val() + "','state':'" + $("#state").val() + "','date':'" + $("#date").val() + "','duration':'" + $("#duration").val() + "','pay':'" + $("#pay").val() + "','industry':'" + $("#industry").val() + "','type':'" + $("#type").val() + "','status':'" + $("#status").val() + "','description':'" + $("#description").val() + "','qualification':'" + $("#qualification").val() + "'}",
contentType: "application/json;charset=utf-8",
processData: false,
dataType: "json",
success: function (data) {
alert('Success');
},
error: function (data, status, error)

Santhosh23 · Answer 2 · 2013-01-04T04:04:00

hi all,

am solved my problem small modification in script code

XML

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://localhost:3658/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>